如何在不换行的情况下在引导列之间添加边距[重复]

Posted 2023-03-05

【中文标题】如何在不换行的情况下在引导列之间添加边距[重复]

【英文标题】：How do I add a margin between bootstrap columns without wrapping [duplicate]

【发布时间】：2013-10-01 09:28:37

【问题描述】：

我的布局目前是这样的

在中心栏中，我想在每个 Server div 之间添加一个小边距。但是，如果我在 CSS 中添加边距，它最终会换行并看起来像这样

<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 添加边距，以免它们在右侧留下太多空间？

【参考方案1】：

您应该使用内部容器上的填充而不是边距。试试这个！

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;

【讨论】：

如果你这样做，列内的东西会表现不同，例如输入不会扩大以填充单元格。

【参考方案2】：

我也面临同样的问题；以下对我来说效果很好。希望这对登陆这里的人有所帮助：

<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>

这将自动在 2 个 div 之间呈现一些空间。

【讨论】：

这很有效，尤其是当背景颜色很重要时。 this answer中也提到过。

但是将列直接放在列中是一种不好的做法，对吧？

干杯 m8！这对我来说效果很好！

有史以来最好的答案！谢谢它就像一个魅力！

它工作正常。真棒的想法。谢谢。

【参考方案3】：

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

[class*="col-"] 
    background-clip: padding-box;
    border: 10px solid transparent;

【讨论】：

不错的技巧，如果您不能使用 background-clip: padding-box（它是 CSS3），请设置与页面背景颜色相同的边框；）

喜欢这个解决方案。

这个解决方案的问题是它破坏了页面中不需要空间的所有其他列

@PabloPazos 当然，解决方案需要适应您自己的情况。只需将通用 [class*="col-"] 替换为另一个选择器即可定位您要添加边距的列。

在 CSS 中更改列的行为也是一种不好的做法。不要那样做！

【参考方案4】：

更改@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>

【讨论】：

@ShaunLuttin 而不是向所有模板的所有 div 添加偏移类以获取利润，难道没有更全局的解决方案吗？在***.com/questions/26016396/… 有同样的问题，但是在任何地方添加偏移类并不是真正可维护的..

@GeorgeKatsanos 你可以使用.make-md-column-offset() mixin 来做到这一点。另外，考虑使用@grid-gutter-width 变量。

【参考方案5】：

执行此操作的简单方法是在 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>

【讨论】：

先生。弗洛雷斯。内联样式很少是此类问题的可行解决方案。

@Kiwad 内联样式只是为了向观众清楚地说明效果。

为什么这个技巧无论如何都能创造空间？ （顺便说一句，只是好奇）