Question

我正在尝试使用bootstrap创建一个网页。我的目标是创建一个网站，其设计类似LinkedIn，Autocar等网站，因为这个网站哪里双方都有保证金，并且在整个网站上保持一致。我需要在bootstrap中进行哪些更改才能实现此目的？目前我已经开始使用bootstrap提供的starter-template。我只是不能为整个模板或者甚至基本的bootstrap导航栏创建边距。

其次，如果可以根据分辨率动态调整边距宽度，那就更好了。虽然我确实尝试过媒体查询，但到目前为止它们都没有。即使在控制台中我也没有收到任何错误，但我也没有获得边距，

编辑： JS小提琴同样可以在https://jsfiddle.net/dpwr2ag1/

找到

到目前为止尝试的方法包括使用媒体查询，更改navbar类导航程序中的填充和边距，尝试更改导航栏的宽度。

如果我将所有这些包含在具有所需宽度的HTML <div>中，我可以完成这项工作，但这是一种我不想采取的黑客攻击方式。

Answer 1

在bootstrap中，您有2个主要的容器类容器和容器 - 液体

Container添加保证金并使用网格系统。容器流体将宽度设置为100％

如果要对布局进行条件更改，则应使用媒体查询。

在继续之前应阅读的一些文档：

http://getbootstrap.com/css/

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;
}

Answer 2

媒体查询的作用，而Bootstrap media queries已经为您提供了一些示例。您可以定义要在其中更改边距的宽度范围。例如：宽度1em的最大宽度为1024px

@media (max-width: 1024px) {
    div.container{
        margin-left: 1em;
        margin-right: 1em;
    }
}

如何在两侧创建带边距的自举设计（最好是有条件的）？

2 个答案: