使用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
最新问题
- （HTML/JS）基于对数据库的 JSON 响应创建报告的按钮不起作用
- 鼠标区域中的按钮悬停状态
- Django-Filter 无法与分页一起使用获取“PostsFilter”类型的对象没有 len()
- Telerik 使用 net6 报告 Html5 时发生错误
- Django - 自定义错误模板未呈现
- 如何使用avaudiorecorder制作音频表电平
- 在 Rails 中使用正则表达式验证电子邮件
- 在 _Imports.razor 中声明布局时，Blazor 应用程序不会加载并使用大量 RAM
- Arduino 中的多个选项卡/文件
- beanstalk docker - 如何使用 Docker.run.json v1 设置容器名称
- 查找具有相同行数的两个二维数组之间的关联行差异
- decoder.ptr 为 nullptr CreateDesktopWindowTarget - IDesktopWindowTarget
- sh: 1: less: 使用PSQL命令时找不到
- 多维关联数组 - 差异
- 为什么在添加新项目后 React Native FlatList 没有更新？
- 如何在Android中加载Flutter资源
- 更改传递给 Python 函数的变量的内容。从变量创建引用的语法糖？
- SSRS - 导航到链接的网站或报告时，然后导航回来，丢失滚动位置和参数
- Azure AD Connect“无法验证凭据”
- 有什么方法可以通过CSS从SVG背景图像中删除/禁用feFilter吗？
© www.soinside.com 2019 - 2024. All rights reserved.