col-breaking我们的包装

我想了解如何响应式布局的工作原理，所以我采取了从引导响应col布局。col-breaking我们的包装

我想要做的是创建一个红框，填充1列的空间，并让它坐在container_fluid> container> row内。当我将“col-lg-12”添加到类中时，它突破了container_fluid> container>行。

HTML

<div class="container_fluid"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-1 "> 
     <div class="red_box"></div> 
     </div> 
    </div> 
    </div>  
</div>

CSS

.container_fluid{ 
margin-left: 0px; 
margin-right: 0px; 
background-color: #000000; 
} 
.container{ 
margin: 0px auto; 
padding: 10px 0px 10px 0px; 
background-color: #367AD7; 
} 
.row{ 
margin-left: 0px; 
margin-right: 0px; 
}

包含所有COL-LG COL-MD等是所有在CSS以及该部分。

来源

2017-05-27 James Legg

您对div.container-fluid –

没有结束标签哎呀，对不起，当我复制粘贴我错过了最后一个结束标记。我其实已经在那里。谢谢 –

只要使用此：

<div class="container"> 
<div class="row"> 
    <div class="col-lg-1 "> 
     <div class="red_box"></div> 
    </div> 
</div>

取出容器流体格。我希望它能完成这项工作。

来源

2017-05-27 12:57:31

使用引导网格系统的期望的方式是这样的液体容器：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-1"> 
     <div class="red_box"></div> 
    </div> 
    </div> 
</div>

而且这样一个固定的中心容器：

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <div class="red_box"></div> 
    </div> 
    </div> 
</div>

在大多数情况下，你不不需要重置容器和行边距，它适用于它！

看看下列example。

来源

2017-05-27 13:17:58

col-breaking我们的包装

回答

相关问题