Bootstrap - 如何在调整大小（垂直和水平）时保持引导列之间的空间？答案

【问题标题】：Bootstrap - How to keep space between bootstrap columns while resizing (vertical and horizontal)?Bootstrap - 如何在调整大小（垂直和水平）时保持引导列之间的空间？
【发布时间】：2018-01-19 23:04:20
【问题描述】：

我使用专栏洞察列在我的引导列之间创建了空间。但是，当我开始调整窗口大小时，列之间的距离变小并最终消失，两列开始相互重叠。使用引导程序调整大小时如何保留空间？谢谢！！！

http://jsfiddle.net/humotrj0/604/

HTML：

<header id="home">
    <div class="container-fluid">
        <div class="row center-block home_boxes_row">
            <div class="col-sm-4">
                <div class="col-xs-12 home_box_left">
                   <p>teststetsttsgdbdshchdchdchdfvhfvhfvndvhdvvf</p>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="col-xs-12 home_box_right"></div>
            </div>
            <div class="col-sm-4">
            </div>
        </div>
    </div>
</header>

CSS：

#home {
  height: 1100px;
  background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
  background-size: cover;
  width: 100%;
  .home_boxes_row {
    margin-top: 200px;
    .home_box_left {
      width: 300px;
      height: 300px;
      background-color: $green;
      padding: 5px;
    }
    .home_box_right {
      width: 300px;
      height: 300px;
      background-color: $blue;
      padding: 5px;
    }
  }

}

【问题讨论】：

伙计，那不是您在 jsfiddle 中加载的 Bootstrap 3。
抱歉，用正确的链接更新了我的帖子。
更新了吗？更新了什么？您仍在那里加载 Bootstrap 4。尝试注意您正在加载的 Bootstrap 的实际版本。这很重要。 BS3 和 BS4 完全不兼容。

标签： css twitter-bootstrap twitter-bootstrap-3 responsive

【解决方案1】：

Boostrap 的构建考虑了响应能力。因此，将两列的宽度设置为像素宽度，在大多数情况下会破坏布局。宽度应该由引导程序处理。

以下 sn-ps 应该为您提供所需的内容。

间距是通过在列内创建一个 div，然后设置边距来实现的。我为此添加了单独的类（.spacing_right 和 .spacing_left）。

我使用过 Bootstrap 4，但它也应该适用于 Bootstrap 3。
注意：bootstrap 4 已将 col-xs-* 替换为 col-*。

#home {
  overflow: auto;
  height: 1100px;
  width: 100%;
  background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
  background-size: cover;
}

.home_boxes_row {
  margin-top: 200px;
}

.home_box_left {
  background-color: orange;
  margin-top: 5px;
}

.home_box_right {
  background-color: red;
  margin-top: 5px;
}

.spacing_right {
  height: 100%;
  margin-right: 25px;
  background-color: green;
}

.spacing_left {
  height: 100%;
  margin-left: 25px;
  background-color: green;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

  <body>
    <header id="home">
      <div class="container-fluid">
        <div class="row home_boxes_row">
          <div class="col-sm-6 col-6 home_box_left">
            <div class="spacing_right">
              <p>Test test teasdasdst</p>
            </div>
          </div>
          <div class="col-sm-6 col-6 home_box_right">
            <div class="spacing_left">
              <p>Test test teasdasdst</p>
            </div>

          </div>
        </div>
      </div>
    </header>
  </body>

</html>

【讨论】：

谢谢！！还有一个问题：如果我无法设置宽度，如何控制（在本例中）彩色 div 的宽度？我试图将 col-xs-12 更改为 col-xs-8 等 - 这不起作用 - 如果我对列进行 div 洞察，我可以工作 = div 在调整大小时仍然不会相互重叠并且具有我的宽度想要但是然后列之间的空间变得太大。如何控制彩色 div 的空间和宽度？感谢您抽出宝贵时间！