<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我正在尝试使用 bootstrap 创建网页。我的目标是创建网页，其设计类似于 LinkedIn、Autocar 等网站， 两边都有边距，并且在整个网站上保持一致。我需要在 Bootstrap 中进行哪些更改才能实现这一目标？目前我已经开始使用 bootstrap 提供的 starter-template。我只是无法为整个模板创建边距，甚至无法为基本的 Bootstrap 导航栏创建边距。
其次，如果这个边距宽度可以根据分辨率动态调整，那就更好了。虽然我确实尝试过媒体查询，但到目前为止它们都没有用。即使在控制台中我也没有得到任何错误，但我也没有得到边距，
编辑: JS Fiddle 可以在以下位置找到:https://jsfiddle.net/dpwr2ag1/
目前尝试的方法包括使用媒体查询、更改 Bootstrap 的导航栏类中的填充和边距、尝试更改导航栏的宽度。
如果我将所有这些都包含在 HTML 中，我就可以完成这项工作 <div>具有所需的宽度，但这是我不想采用的 hack-ish 方法。
最佳答案
在 bootstrap 中，你有 2 个主要的容器类 容器和容器流体
容器添加边距并使用网格系统。 Container-fluid 设置宽度为100%
如果您想对布局进行有条件的更改，您应该使用媒体查询。
在继续之前您应该阅读的一些文档:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
[编辑]
示例代码
<html>
<head>
<title>My awesome page</title>
<link href = "bootstrap.css" rel="stylesheet"/>
<link href = "custom.css" rel="stylesheet"/>
</head>
<body>
<div class = "container">
<h1>The title</h1>
<p>The content</p>
</div>
</body>
</html>
custom.css:
@media only screen and (max-width:768px) {
.container{
width:100%!important;
padding:0;
}
关于html - 如何创建两边都有边距的 Bootstrap 设计(最好是有条件的)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34308314/