Question

我想在一行中的所有块之间具有相同的间距，就像我们左右一样。默认情况下，bootstrap会向两侧的所有列添加填充。并且由于

，它不会在第一列的左侧和最后一列的右侧产生额外的间距

.row {
margin-right: -15px;
margin-left: -15px;}

但是在内侧我们得到双倍间距，在特定情况下我不想要。

我在google上搜索了这个.no-gutter片段，但它只删除了我不想要的所有填充。

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

我添加了padding-left：0到第二列以解决问题，但它也移除了移动视图的填充（当所有列占据整个宽度时）。我知道我也可以通过为每个断点编写媒体查询来解决。但是我想知道是否已经有任何可以执行此操作的引导片段，并且还希望如果其他人也尝试实现此目的，想知道他们尝试了什么。

我在JSFiddle上创建了一个测试用例 - http://jsbin.com/wucaho/1/edit?html,css,output

此屏幕截图将让您轻松理解我的问题

enter image description here

Answer 1

我意识到这是一个老帖子，但这对我有所帮助，希望将来可以帮助其他人。

.no-gutter-left > [class*='col-'] {
    padding-left:0;
    padding-right:6px;
}

.no-gutter-right > [class*='col-'] {
    padding-right:0;
    padding-left:6px;
}

将.no-gutter-left应用于第一个字段（左），将apple .no-gutter-right应用于第二个字段（右）。

<div class="form-group no-gutter-left">
    <div class="form-group col-sm-6">
        <label class="sr-only">First Name</label>
        <input type="text" class="form-control" placeholder="First Name" name="fname">
    </div>
</div>

<div class="form-group no-gutter-right ">
    <div class="form-group col-sm-6">
        <label class="sr-only">Last Name</label>
        <input type="text" class="form-control" placeholder="Last Name" name="lname">
    </div>
</div>

如果你想要一行中的3列，你可能需要在两边添加一个“.no-gutter-both”类，其中包含3px填充。

Answer 2

我认为这就是你的意思。您可以将行包装在自定义容器中。我只是称它为“包裹”。

.wrap {
    padding: 0 15px;
}

所以标记是：

<div class="wrap aka-my-custom-container">
    <div class="row no-gutter">
        <div class="col-sm-4">...</div>
        <div class="col-sm-8">...</div>
    </div>
</div>

这是一张图片： enter image description here

Answer 3

修改：您必须使用媒体查询..我无法找到此内容或其他内容的任何代码段。快速轻松＆＃34;解。至少，制作框架的人使用媒体查询。 ;）

将此代码添加到css文件的底部：

@media only screen and ( max-width: 479px ) {  
  .no-left-pad { padding-left: 15px; }

  .no-gutter > [class*='col-'] {
     padding-right: 15px;
     padding-left: 15px;
  }
}

编辑2 ：）

您可以使用JS库来检测移动设备和/或小屏幕。并在页面加载时将特定类添加到html或body标记。例如：

<html class="mobile">
OR
<body class="small-screen">

通过这种方式，您可以将此类用作前缀而不是媒体查询。

Answer 4

我通过创建一个我想要没有排水沟的列上的类来解决这个问题：

[class*='col-'].gutterless {
    padding-right:0;
    padding-left:0;
}

所以我的标记看起来像这样：

<div class="row">
  <div class="col-sm-3"> left box </div>
  <div class="col-sm-9 gutterless"> right box </div>
</div>

我不确定这是否是您正在寻找的：

示例：http://jsbin.com/dovag/1

如何在一行中的列之间具有相同的间距，就像我们在Bootstrap 3网格中左右一样？

4 个答案: