twitter-bootstrap 如何在引导程序中有一个空的 col-md-*?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31445295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to have an empty col-md-* in bootstrap?
提问by am1212
I'm trying to have two unequal columns in Bootstrap. I want to have one column on each side (so if there are columns from 1 to 12, 1 and 12 will be empty), and col-md-2~5 is one column, and 6~11 is another column.
我试图在 Bootstrap 中有两个不相等的列。我想每边有一列(所以如果有从 1 到 12 的列,1 和 12 将为空),并且 col-md-2~5 是一列,而 6~11 是另一列。
I can't really find an example for this (other than the offset). Can someone help me?
我真的找不到一个例子(除了偏移量)。有人能帮我吗?
采纳答案by Amanjot Kaur
If you don't want to use offset as per your requirement, use
如果您不想根据您的要求使用偏移量,请使用
<div class="container">
<div class="row" style="background:red">
<div class="col-md-1" style="background:yellow"> </div>
<div class="col-md-4" style="background:green">B</div>
<div class="col-md-6" style="background:red">C</div>
<div class="col-md-1" style="background:yellow"> </div>
</div>
</div>
But, I think you should use offsets
但是,我认为您应该使用偏移量
回答by Phil
Use offsets. You only need to define the first offset as the second colwill float next to the first.
使用偏移量。您只需要定义第一个偏移量,因为第二个列将浮动在第一个列旁边。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div style="background:#f99" class="col-xs-4 col-xs-offset-1">Cols 2-5</div>
<div style="background:#9f9" class="col-xs-6">Cols 6-11</div>
</div>
</div>
Note:I'm using the xscolumn size so it works in the snippet frame.
注意:我使用的是xs列大小,因此它适用于代码片段框架。
Note, for Bootstrap 4, the offset classes use different names. The col-*-offset-*classes become .offset-*.
请注意,对于 Bootstrap 4,偏移类使用不同的名称。该col-*-offset-*班成了.offset-*。
See http://upgrade-bootstrap.bootply.com/for a handy migration guide
有关方便的迁移指南,请参阅http://upgrade-bootstrap.bootply.com/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div style="background:#f99" class="col-4 offset-1">Cols 2-5</div>
<div style="background:#9f9" class="col-6">Cols 6-11</div>
</div>
</div>
See https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns
请参阅https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns

