CSS 在两个 Bootstrap 列之间创建用户定义的间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18806251/
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
Create a user-defined gap between two Bootstrap columns
提问by Max Rhan
I want to create little panels/dashboard for my interface. In my case I want to have two panels like so
我想为我的界面创建小面板/仪表板。在我的情况下，我想要两个像这样的面板
+-------------------------------+ +-------------------------------+
| | | |
| | | |
+-------------------------------+ +-------------------------------+
Generally it is easy with Bootstrap 3.
一般来说，使用 Bootstrap 3 很容易。
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-5 pull-right">
</div>
</div>
The problem is, the gap of col-md-2, as it is the case here, is way too big. I cannot use a col-md-1 gap, because then both sides do not have an equal size.
问题是，col-md-2 的差距，就像这里的情况一样，太大了。我不能使用 col-md-1 间隙，因为这样两边的大小不相等。
I also tried to add padding right and left, but that had not effect, too. What can I do here?
我也尝试在左右添加填充，但这也没有效果。我能在这里做什么？
回答by Konrad Reiche
You could add a class which modifies the width of col-md-6. The width of this class is set to 50%. A smaller gap is achieved by reducing the width like so:
您可以添加一个类来修改col-md-6. 此类的宽度设置为50%. 通过像这样减小宽度来实现更小的间隙：
.dashboard-panel-6 {
width: 45%;
}
Add this to your div elements. This way the width rule of col-md-6gets overriden.
将此添加到您的 div 元素。这样，宽度规则col-md-6就会被覆盖。
<div class="row">
<div class="col-md-6 dashboard-panel-6">...</div>
<div class="col-md-6 dashboard-panel-6">...</div>
</div>
回答by kenttam
You can use another div inside and give padding to that.
您可以在里面使用另一个 div 并为其提供填充。
<div class="row">
<div class="col-md-6">
<div class="inner-div">
</div>
</div>
<div class="col-md-6 pull-right">
<div class="inner-div">
</div>
</div>
</div>
.inner-div{
padding: 5px;
}
回答by David Taiaroa
Here's another possibility:
Live view
Edit view
You will see that it uses 2 col-md-6, each with a nested col-md-11, and you position the nested row in the second div to the right.
您将看到它使用 2 个 col-md-6，每个都有一个嵌套的 col-md-11，并且您将嵌套的行放置在右侧的第二个 div 中。
The suggestion from Kenhas clean HTML which I like. If your left and right panels use elements with widths defined by Bootstrap though (eg wells or form elements) the column padding could cause hassles and break the layout. This nested approach might be easier in this situation.
Ken的建议有我喜欢的干净 HTML。如果您的左右面板使用由 Bootstrap 定义的宽度的元素（例如井或表单元素），则列填充可能会导致麻烦并破坏布局。在这种情况下，这种嵌套方法可能更容易。
HTML
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-11">nested row col-md-11</div>
</div><!-- end nested row -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-11 col-md-offset-1">nested row col-md-11</div>
</div><!-- end nested row -->
</div>
</div>
</div>
Good luck!
祝你好运！
回答by Joe Fitzgibbons
I posted this herealready but it is still relevant the original question.
I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.
我在列之间的空间方面遇到了类似的问题。根本问题是引导程序 3 和 4 中的列使用填充而不是边距。因此，两个相邻列的背景颜色相互接触。
I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.
我找到了一个适合我们的问题的解决方案，并且很可能适用于大多数试图分隔列并保持与网格系统其余部分相同的间距宽度的人。
This was the end result we were going for
这是我们想要的最终结果
Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.
列之间有阴影的间隙是有问题的。我们不希望列之间有额外的空间。我们只是希望排水沟是“透明的”，这样网站的背景颜色就会出现在两个白色列之间。
this is the markup for the two columns
这是两列的标记
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column
这种方法确实需要一个具有负边距的内部 div，就像“行”类引导程序使用的那样。而这个 div，我们称之为“raised-block”，必须是一列的直接兄弟
This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.
通过这种方式，您仍然可以在列内获得适当的填充。我见过似乎通过创建空间来工作的解决方案，但不幸的是，他们创建的列在行的两侧都有额外的填充，因此最终使行变得更薄，而网格布局是为此而设计的。如果您查看图像以获得所需的外观，这意味着两列加在一起将小于顶部较大的一列，这会破坏网格的自然结构。
The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.
这种方法的主要缺点是它需要额外的标记来包装每一列的内容。对我们来说这是有效的，因为只有特定的列需要它们之间的空间才能实现所需的外观。
Hope this helps
希望这可以帮助
