Question

第一个问题：

让我们说我的网站中有一个部分，我希望打破container 1200px宽度的宽度。在本节中，我需要在浏览器屏幕的最左侧放置一个图像，在右侧放置一些文本。

我认为为了做到这一点，我必须使用container-fluid并且我这样使用它：

<div class="container-fluid">
 <div class="row">
 <div> HERE IS THE CONTENT FOR IMAGE AND TEXT </div>
 </div>
</div>

当我在浏览器中检查时：

它似乎是一个水平滚动条，我必须删除.row类的负边距才能摆脱滚动条。

这是正常的做法吗？

第二个问题：

让我们说我想要创建一个部分，我想要一个全宽的背景颜色，并且内容的默认自举网格宽度为1200px。

是否有必要创建container-fluid才能执行此操作？或者更好的是只创建一个额外的div并添加背景颜色？

Answer 1

在Bootstrap中，网格由三个组件定义：容器，行和列。容器有两种形式：container，它为Bootstrap中定义的每个特定断点设置容器的最大宽度，并将容器置于视口中心;和容器流体，它只是将宽度设置为视口显示的100％。两个容器都将填充设置为15px。

该行的目的是包含默认情况下向左浮动的列，因此它将自动清除浮动。它具有-15px的余量来抵消容器添加的填充。

列位于行内。列基于12的网格。如果在x小断点处只需要一列，则添加一个col-xs-12。想要在该视口宽度处有两个相等的列，添加两个col-xs-6。列左右有15px的填充，所以总是有一致的排水沟。

否定容器宽度的行边距可能听起来毫无用处，但它非常重要且非常聪明，因为它允许您在其他列中嵌套行和列，从而允许您创建无限的网格划分组合。

因此，您的问题是您没有按照设计的方式使用网格。您必须在容器内的一行内至少有一列。

Answer 2

在bootstrap中，您需要以下结构：

<div class="container-fluid">
     <div class="row">
         <div class="col-xx-xx">
                   ...content goes here...
         </div>
     </div>
</div>

这种结构的原因是容器会尝试抓取并居中内容，在.container-fluid的情况下，它会抓取100％宽度的列而不是传统的〜960ish像素。

该行允许您按照您决定的顺序分配12列内容，这是下一个div。

类.col-xx-xx将允许您指定该列的断点，lg表示大型设备，md表示中型设备sm和xs适用于手机/平板电脑。

xx中的第二个.col-xx-xx允许您指定要在该容器中使用的12列中的多少列。例如，.col-lg-3将是一个断点的列是大型设备（1200px左右），它将需要3个列空间。

所以有必要使用上面的结构，否则你会让x轴上的滚动条感到困扰。

修改

至于你的第二个问题，你真的有必要在代码中使用上面给出的结构，你想要它是全宽吗？这意味着，没有边距和填充，我有一个小技巧，我已经使用了一段时间了，我将在下面解释：

使用类jumbotron的容器，如下所示：

<div class="jumbotron my-own-jumbotron"> ...content goes here <div>

由于jumbotron es设计为具有响应性，因此它将充当响应式容器。在下一堂课上，.my-own-jumbotron指定您想要的背景图片或颜色，并根据您添加的内容，调整它的大小。我不知道这是否是您正在寻找的解决方案，但这是一个演示：

https://www.hsoto.me/00295134567891srgsrgsrht36erdrbd5ye546/ipotra/

第三个div将是一个带有自定义背景图像的超大屏幕，可根据需要进行扩展，您可以调整它并在移动设备上查看它，它是完整的响应和全宽。

我发现这样，没有必要使用.container-fluid div。

正确使用bootstrap中的容器 - 液体

2 个答案: