如何至少近似模仿col-md-1.5？

Question

我需要将Bootstrap列调整为这样。

问题是，在较小的设备上，我只想隐藏侧面的空白区域，因此我不想仅使用边距或填充。

我怎样才能实现这一目标？ col-md-1对于缩进来说似乎太小了，而col-md-2太宽了。

包含Bootstrap的

My Codepen。

HTML

<div class="container">
</div>

CSS

.container {
  height: 230px;
  background-color: blue;
  max-width: 1050px;
  padding-left: 15px;
  padding-right: 15px;
}

Answer 1

您无法在移动视图中使用@media标记来剪切填充内容吗？使它变得更容易。只需将下面的类添加到容器或行中即可。

.marginClass{
  margin: 0 15px 0 15px;
}

@media screen and (min-width: 480px) {
    .marginClass{
      margin: 0;
}

实际上你可能更好地使用保证金。我已经更新了。

Answer 2

不确定你想要在这里实现什么。容器使用媒体查询根据屏幕大小更改宽度。当屏幕尺寸小于768像素时，您试图摆脱的白色/空白区域正在消失。

如果我理解您的问题是正确的this option：

，您可以做什么

HTML：

<!-- CONTAINER -->
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="row">
        <div class="col-md-3">
          This is column nested inside
        </div>
        <div class="col-md-3">
          This is column nested inside
        </div>
        <div class="col-md-3">
          This is column nested inside
        </div>
        <div class="col-md-3">
          This is column nested inside
        </div>
      </div>
    </div>
  </div>
</div>

<!-- CONTAINER FLUID -->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="row">
        <div class="col-md-3">
          This is column nested inside
        </div>
        <div class="col-md-3">
          This is column nested inside
        </div>
        <div class="col-md-3">
          This is column nested inside
        </div>
        <div class="col-md-3">
          This is column nested inside
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.container-fluid,
.container {
  height: 230px;
  background-color: #333;
/*   max-width: 1050px; */
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 15px;
}

html, body {
  color: #fff;
}

Answer 3

如果您不想声明任何新类填充等。您可以简单地嵌套列bootply.com