logo标签列表

如何在不换行的情况下在Bootstrap列之间添加边距？

htmlcsstwitter-bootstraptwitter-bootstrap-3
179

我的布局目前是这样的

当前布局

在中间列，我想在每个 Server Div 之间添加一个小的margin。但是，如果我在CSS中添加了margin，它最终会换行并且看起来像这样：

尝试的更改

<div class="row info-panel">
    <div class="col-md-4 server-action-menu" id="server_1">
        <div>
            Server 1
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_2">
        <div>
            Server 2
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_3">
        <div>
            Server 3
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_4">
        <div>
            Server 4
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_5">
        <div>
            Server 5
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_6">
        <div>
            Server 6
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_7">
        <div>
            Server 7
        </div>
    </div>
</div>

并且CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
}

.info-panel {
    padding: 4px;
}

我尝试通过这样做来添加边距

.info-panel  > div {
    margin: 4px;    
}

我该如何为 DIV 添加边距，使它们不会在右侧留下太多空白空间？

5个回答
202
你应该在内部容器上使用 padding 而不是 margin。试试这个！
HTML
<div class="row info-panel">
    <div class="col-md-4" id="server_1">
       <div class="server-action-menu">
           Server 1
       </div>
   </div>
</div>

CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
    padding: 5px;
}
如果你这样做，列内部的东西会表现得不同，例如输入框不会扩展以填满单元格。 - user3690202
我认为边框可能会损坏这个。 - Muhammed Moussa
修复了换行问题，但破坏了边框、背景等。 - Midiman
83

我曾经遇到过同样的问题；以下的方法对我很有用：

<div class="row">
    <div class="col-md-6">
        <div class="col-md-12">
            Set room heater temperature
        </div>
    </div>
    <div class="col-md-6">
        <div class="col-md-12">
            Set room heater temperature
        </div>
    </div>
</div>

这将自动在两个

之间渲染一些空格。 enter image description here

4
这个非常好用，尤其是在背景颜色很重要的情况下。也在这个答案中提到过。 - Leo
4
将一个列直接放在另一个列中是不好的做法，对吗？ - Jovis Joseph
这是一种不好的做法，我不建议使用这个解决方案。特别是，这不是一个比带有类名 px-X 的容器 div 更好的解决方案。 - Loenix
使用 px 单位的容器并不能解决问题，因为它基本上会改变背景颜色和边框。 - Midiman
65

如果您不需要在列上添加边框，您也可以简单地在它们上面添加透明边框：

[class*="col-"] {
    background-clip: padding-box;
    border: 10px solid transparent;
}
6
不错的技巧，如果无法使用background-clip: padding-box（这是CSS3），可以将边框设置为页面背景相同的颜色。 - Frank
喜欢这个解决方案。 - hugger
1
这种解决方案的问题是它会破坏页面上所有不需要空间的其他列。 - Pablo Pazos
@PabloPazos 当然，解决方案需要根据您自己的情况进行调整。只需将通用的 [class*="col-"] 替换为另一个选择器，以定位您想要添加边距的列即可。 - Seb33300
1
改变CSS中列的行为也是一种不好的做法。不要这样做！ - Loenix
25

更改 @grid-columns 的数量。然后使用 -offset。更改列数将允许您控制列之间的空间量。例如:

variables.less（大约在第294行）。

@grid-columns:              20;

someName.html

<div class="row">
  <div class="col-md-4 col-md-offset-1">First column</div>
  <div class="col-md-13 col-md-offset-1">Second column</div>
</div>
3
@ShaunLuttin，你是否有更全局的解决方案，而不是在所有模板的所有div上添加偏移类来创建边距？我在http://stackoverflow.com/questions/26016396/add-gutter-margin-between-bootstrap-columns/26016735#26016735上也遇到了同样的问题，但是到处添加偏移类并非可维护的解决方法。 - George Katsanos
@GeorgeKatsanos 您可以使用.make-md-column-offset() mixin来实现。此外，考虑调整@grid-gutter-width变量的值。 - Shaun Luttin
6
简单的方法是在一个 div 中嵌套另一个 div。 

<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 1
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 2
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 3
   </div>
 </div>

2
弗洛雷斯先生。行内样式很少是解决这种问题的可行方案。 - JFC
4
内联样式仅用于清晰地向观众展示效果。 - TylerH
为什么这个技巧可以创建空间呢？（顺便说一句，它确实有效，只是好奇） - Peter G. Williams
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接