使用UIKit的内容页面表
问题描述 投票：0回答：2
我正在使用UIKit开发一个页面，其中我的内容表位于右侧，而左侧的文本位于内容表中（截图如下）。到目前为止，我已成功开发了该页面。但是，我很难让这个页面响应所有设备。我希望我的目录堆放在顶部，文章应位于较小设备上，而大型设备上的内容表位于右侧，文本位于左侧。以下是我正在处理的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="uk-container uk-padding uk-margin-medium-bottom ">
<article class="uk-article">
<div class="uk-width-xxlarge uk-margin-auto uk-text-center">
<h1 class="uk-article-title">Security </h1>
</div>
<div class="toc uk-float-right uk-margin-left uk-margin-bottom uk-margin-top ">
<h4 style="margin:0px">
<b>Contents</b>
</h4>
<hr>
<!-- Table of content list starts from here -->
<ul class="listOfContent">
<li>
<a href="#introduction">Introduction</a>
<ul>
<a href="#overview" class="uk-scroll"><li>Overview</li></a>
</ul>
</li>
<!--Introduction finsih here -->
<li>Contents</li>
<li><a href="#infra">Infrastructure Security</a>
<ul>
<li>Datacenters
<ul>
<li>Availability and Resiliency</li>
</ul>
</li>
<li> Configuration Management
<ul>
<li>Patching Policy</li>
<li>Server Authentication</li>
</ul>
</li>
<li>Monitoring</li>
<li>Automated Scanning
<ul>
<li>Vulnerablity Scanning</li>
<li>Intrusion Detection</li>
<li>Data Leak Scanning</li>
</ul>
</li>
</ul>
</li>
<!--Infrastructure Secuirty finish here -->
<li>Data Security
<ul>
<li>Privacy</li>
<li>Data Sovereignty
<ul>
<li>Leaving the Org</li>
</ul>
<li>Support Access</li>
</li>
</ul>
</li>
<!--Data Secuirty list close here -->
<li>Web Application Secuirty
<ul>
<li>Change Management
<ul>
<li>CI/CD</li>
<li>Testing</li>
</ul>
</li>
<li>User Authentication
<ul>
<li>Password Storage</li>
<li>Password Requirements</li>
<li>Google Authentication Support
<ul>
<li>Two/Multi-factor Authentication</li>
</ul>
</li>
</ul>
</li>
<li>Encryption
<ul>
<li>HTTPS/TLS</li>
<li>Encryption in Transit</li>
<li>Encryption at Rest</li>
</ul>
</li>
</ul>
</li>
<!--Web application list finishes here -->
<li>Network Secuirty
<ul>
<li>Firewalls</li>
<li>Network Flow Monitoring</li>
</ul>
</li>
<!-- Network finsihes here -->
<li>Backups and Business Continuity</li>
<ul>
<li>Database Backups
<ul>
<li>Ppint In Time Recovery via Automated Backups</li>
<li> Cross Region Copied Snapshots</li>
</ul>
</li>
<li>Other Backups</li>
</ul>
</ul>
</div>
<!--Start of the article -->
<div class=" uk-align-center uk-flex-first@l uk-flex-first@m uk-flex-last@s ">
<div>
<span class="anchor" id="introduction"></span>
<!-- <div class="introduction"> -->
<h3 >Introduction</h3>
<p class="uk-article-lead"> This Company is a SaaS platform used to collect and analyse customer feedback and survey. development team is based in Germany<br/> <br/>
This is a collection of topics that describe how we run securely. They're intended as a high-level introduction to how we deal with security, in order to help you with your decision making process. More details are available on request - just ask your sales representative.
</p>
</div>
<!--Overview div -->
<div>
<h3>Overview</h3>
<p> As a very high-level summary:
<ul>
<li>The Company has strong application, network and infrastructure-level security controls in place to ensure your data is safely stored and processed
<br/><br/></li>
<li>Comaony serves multiple tenants from the same application codebase, but uses effective isolation techniques to keep tenant data separate
<br/><br/></li>
<li>Comopany observes privacy laws, which are broadly compatible with many other jurisdictions (for example, we support the rights of access and rectification for data subjects)
<br/>
<br/></li>
<li>Company is hosted on AWS, in multiple regions, using VPC
You'll find more information on each of these points in the detailed chapters documents below. <br/></br></li>
</ul>
</p>
</div>
<!--divider style="overflow: hidden;" -->
<hr style="overflow: hidden;">
<!-- Infrastructure Div -->
<div>
<span class="anchor" id="infra"></span>
<h3>Infrastructure Security</h3>
<h5 id="datacenters" style="margin-bottom:0px;"><b>Datacenters </b></h5>
<p>
Company's products are hosted with the world’s leading data centre provider, Amazon Web Services (AWS). Access to these datacenters is strictly controlled and monitored by 24x7 on-site security staff, biometric scanning and video surveillance.
AWS maintains multiple certifications for its data centres, including ISO 27001 compliance, PCI Certification, and SOC reports. For more information about their certification and compliance, please visit the AWS Security website and the AWS Compliance website.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- </div> -->
<br/>
</div>
</article>
</div>
</body>
</html>
2个回答
0
投票
投票
我已经编辑了你的代码，还有一些html错误，所以一定要检查你的代码。
您可以通过!important规则覆盖TOC的行为，但它可能会导致问题，或者在某些情况下，由于UIKit中有其他规则使用!important，因此无法工作，因此最好创建自己的自定义类并将此行为应用于它。
我创建了一个.custom-toc类，它基本上复制了.uk-float-right和.uk-margin-left，当屏幕宽度低于X时，删除这些规则..
对于这个片段，我将max-width设置为768px，因此在预览时，TOC位于顶部，当您单击“整页”时，您将获得右侧的TOC。
/* assign a lower value, something between 480 and 568 should be fine */
.custom-toc {
float: right;
margin-left: 20px;
}
@media (max-width: 768px) {
.custom-toc {
float: none;
margin-left: 0;
}
}<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
<div class="uk-container uk-padding uk-margin-medium-bottom ">
<article class="uk-article">
<div class="uk-width-xxlarge uk-margin-auto uk-text-center">
<h1 class="uk-article-title">Security </h1>
</div>
<div class="toc custom-toc uk-margin-bottom uk-margin-top ">
<h4 style="margin:0px">
<b>Contents</b>
</h4>
<hr>
<!-- Table of content list starts from here -->
<ul class="listOfContent">
<li>
<a href="#introduction">Introduction</a>
<ul>
<a href="#overview" class="uk-scroll">
<li>Overview</li>
</a>
</ul>
</li>
<!--Introduction finsih here -->
<li>Contents</li>
<li><a href="#infra">Infrastructure Security</a>
<ul>
<li>Datacenters
<ul>
<li>Availability and Resiliency</li>
</ul>
</li>
<li> Configuration Management
<ul>
<li>Patching Policy</li>
<li>Server Authentication</li>
</ul>
</li>
<li>Monitoring</li>
<li>Automated Scanning
<ul>
<li>Vulnerablity Scanning</li>
<li>Intrusion Detection</li>
<li>Data Leak Scanning</li>
</ul>
</li>
</ul>
</li>
<!--Infrastructure Secuirty finish here -->
<li>Data Security
<ul>
<li>Privacy</li>
<li>Data Sovereignty
<ul>
<li>Leaving the Org</li>
<li>Support Access</li>
</ul>
</li>
</ul>
</li>
<!--Data Secuirty list close here -->
<li>Web Application Secuirty
<ul>
<li>Change Management
<ul>
<li>CI/CD</li>
<li>Testing</li>
</ul>
</li>
<li>User Authentication
<ul>
<li>Password Storage</li>
<li>Password Requirements</li>
<li>Google Authentication Support
<ul>
<li>Two/Multi-factor Authentication</li>
</ul>
</li>
</ul>
</li>
<li>Encryption
<ul>
<li>HTTPS/TLS</li>
<li>Encryption in Transit</li>
<li>Encryption at Rest</li>
</ul>
</li>
</ul>
</li>
<!--Web application list finishes here -->
<li>Network Secuirty
<ul>
<li>Firewalls</li>
<li>Network Flow Monitoring</li>
</ul>
</li>
<!-- Network finsihes here -->
<li>Backups and Business Continuity</li>
<ul>
<li>Database Backups
<ul>
<li>Ppint In Time Recovery via Automated Backups</li>
<li> Cross Region Copied Snapshots</li>
</ul>
</li>
<li>Other Backups</li>
</ul>
</ul>
</div>
<!--Start of the article -->
<div class=" uk-align-center uk-flex-first@l uk-flex-first@m uk-flex-last@s ">
<div>
<span class="anchor" id="introduction"></span>
<!-- <div class="introduction"> -->
<h3>Introduction</h3>
<p class="uk-article-lead"> This Company is a SaaS platform used to collect and analyse customer feedback and survey. development team is based in Germany<br/> <br/> This is a collection of topics that describe how we run securely. They're intended as a high-level introduction
to how we deal with security, in order to help you with your decision making process. More details are available on request - just ask your sales representative.
</p>
</div>
<!--Overview div -->
<div>
<h3>Overview</h3>
<p> As a very high-level summary: </p>
<ul>
<li>The Company has strong application, network and infrastructure-level security controls in place to ensure your data is safely stored and processed
</li>
<li>Comaony serves multiple tenants from the same application codebase, but uses effective isolation techniques to keep tenant data separate
</li>
<li>Comopany observes privacy laws, which are broadly compatible with many other jurisdictions (for example, we support the rights of access and rectification for data subjects)
</li>
<li>Company is hosted on AWS, in multiple regions, using VPC You'll find more information on each of these points in the detailed chapters documents below.
</li>
</ul>
</div>
<!--divider style="overflow: hidden;" -->
<hr style="overflow: hidden;">
<!-- Infrastructure Div -->
<div>
<span class="anchor" id="infra"></span>
<h3>Infrastructure Security</h3>
<h5 id="datacenters" style="margin-bottom:0px;"><b>Datacenters </b></h5>
<p>
Company's products are hosted with the world’s leading data centre provider, Amazon Web Services (AWS). Access to these datacenters is strictly controlled and monitored by 24x7 on-site security staff, biometric scanning and video surveillance. AWS maintains
multiple certifications for its data centres, including ISO 27001 compliance, PCI Certification, and SOC reports. For more information about their certification and compliance, please visit the AWS Security website and the AWS Compliance website.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- </div> -->
<br/>
</div>
</article>
</div>或者如果你只想使用UIKit类，你可以使用.uk-align-right@s或.uk-align-right@m，它只会在指定的宽度上应用该类，它也会结合浮点数和边距（但有时很难对它进行微调，所以我更喜欢自定义类，640px for @s是手机和平板电脑之间的东西..）。在这里我使用@m只是为了在代码中更好地演示行为，在你的代码中，你应该使用@s
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
<div class="uk-container uk-padding uk-margin-medium-bottom ">
<article class="uk-article">
<div class="uk-width-xxlarge uk-margin-auto uk-text-center">
<h1 class="uk-article-title">Security </h1>
</div>
<div class="toc uk-align-right@s uk-margin-bottom uk-margin-top">
<h4 style="margin:0px">
<b>Contents</b>
</h4>
<hr>
<!-- Table of content list starts from here -->
<ul class="listOfContent">
<li>
<a href="#introduction">Introduction</a>
<ul>
<a href="#overview" class="uk-scroll">
<li>Overview</li>
</a>
</ul>
</li>
<!--Introduction finsih here -->
<li>Contents</li>
<li><a href="#infra">Infrastructure Security</a>
<ul>
<li>Datacenters
<ul>
<li>Availability and Resiliency</li>
</ul>
</li>
<li> Configuration Management
<ul>
<li>Patching Policy</li>
<li>Server Authentication</li>
</ul>
</li>
<li>Monitoring</li>
<li>Automated Scanning
<ul>
<li>Vulnerablity Scanning</li>
<li>Intrusion Detection</li>
<li>Data Leak Scanning</li>
</ul>
</li>
</ul>
</li>
<!--Infrastructure Secuirty finish here -->
<li>Data Security
<ul>
<li>Privacy</li>
<li>Data Sovereignty
<ul>
<li>Leaving the Org</li>
<li>Support Access</li>
</ul>
</li>
</ul>
</li>
<!--Data Secuirty list close here -->
<li>Web Application Secuirty
<ul>
<li>Change Management
<ul>
<li>CI/CD</li>
<li>Testing</li>
</ul>
</li>
<li>User Authentication
<ul>
<li>Password Storage</li>
<li>Password Requirements</li>
<li>Google Authentication Support
<ul>
<li>Two/Multi-factor Authentication</li>
</ul>
</li>
</ul>
</li>
<li>Encryption
<ul>
<li>HTTPS/TLS</li>
<li>Encryption in Transit</li>
<li>Encryption at Rest</li>
</ul>
</li>
</ul>
</li>
<!--Web application list finishes here -->
<li>Network Secuirty
<ul>
<li>Firewalls</li>
<li>Network Flow Monitoring</li>
</ul>
</li>
<!-- Network finsihes here -->
<li>Backups and Business Continuity</li>
<ul>
<li>Database Backups
<ul>
<li>Ppint In Time Recovery via Automated Backups</li>
<li> Cross Region Copied Snapshots</li>
</ul>
</li>
<li>Other Backups</li>
</ul>
</ul>
</div>
<!--Start of the article -->
<div class=" uk-align-center uk-flex-first@l uk-flex-first@m uk-flex-last@s ">
<div>
<span class="anchor" id="introduction"></span>
<!-- <div class="introduction"> -->
<h3>Introduction</h3>
<p class="uk-article-lead"> This Company is a SaaS platform used to collect and analyse customer feedback and survey. development team is based in Germany<br/> <br/> This is a collection of topics that describe how we run securely. They're intended as a high-level introduction
to how we deal with security, in order to help you with your decision making process. More details are available on request - just ask your sales representative.
</p>
</div>
<!--Overview div -->
<div>
<h3>Overview</h3>
<p> As a very high-level summary: </p>
<ul>
<li>The Company has strong application, network and infrastructure-level security controls in place to ensure your data is safely stored and processed
</li>
<li>Comaony serves multiple tenants from the same application codebase, but uses effective isolation techniques to keep tenant data separate
</li>
<li>Comopany observes privacy laws, which are broadly compatible with many other jurisdictions (for example, we support the rights of access and rectification for data subjects)
</li>
<li>Company is hosted on AWS, in multiple regions, using VPC You'll find more information on each of these points in the detailed chapters documents below.
</li>
</ul>
</div>
<!--divider style="overflow: hidden;" -->
<hr style="overflow: hidden;">
<!-- Infrastructure Div -->
<div>
<span class="anchor" id="infra"></span>
<h3>Infrastructure Security</h3>
<h5 id="datacenters" style="margin-bottom:0px;"><b>Datacenters </b></h5>
<p>
Company's products are hosted with the world’s leading data centre provider, Amazon Web Services (AWS). Access to these datacenters is strictly controlled and monitored by 24x7 on-site security staff, biometric scanning and video surveillance. AWS maintains
multiple certifications for its data centres, including ISO 27001 compliance, PCI Certification, and SOC reports. For more information about their certification and compliance, please visit the AWS Security website and the AWS Compliance website.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- </div> -->
<br/>
</div>
</article>
</div>-1
投票
投票
首先：将你的toc-block粘贴在左侧，将文本粘贴在右侧（=移动第一个方法）。然后试试这个：https://getuikit.com/docs/align#responsive
最新问题
- 如何使用 ItemsSource 在嵌套 TreeView 中进行搜索？
- 错误：参数后缺少换行符，│参数定义必须以换行符结尾
- Javascript 模式识别
- Visual Studio 调试器有时会进入 System.Object.Object()
- 自动决策表生成器
- postgres 是否可以在单个事务中由另一个操作访问由一个操作锁定的行或表
- 为什么读取套接字的内容需要很长时间才能完成
- 三个分裂的圆环显示黑色虚线
- 如何使用 gembox 演示代码创建饼图
- 如何删除 HDESK 网站的页脚品牌
- 为什么expo-cli必须全局安装？
- 符号链接不继承权限
- 获取 JSON 数组中的最大值
- 如何打开并测试移动应用程序的精细同意？
- 神经网络除法：无法获取未知秩的形状的长度
- 将图表绘制为 folium 地图中的弹出窗口
- 如何通过舍入绘图值来减小 Rplotly html 输出的大小
- 每当我尝试重新渲染文本时，Mermaid JS 都会给我一个语法错误
- Angular 9 - 我的自定义指令没有按预期工作
- 响应状态码并不表示成功：415（不支持的媒体类型）
© www.soinside.com 2019 - 2024. All rights reserved.