如何在 Bootstrap 列之间放置空间？ [复制]

Question

我正在尝试使用 Bootstrap 创建一个网站，当我尝试将两列并排放置时（它们一起出现在 bootstrap 中允许的 12 个列中），它们只是被挤在一起。我尝试为其中一列添加边距，但这只会导致较小的列包裹并最终位于较大的列之下。

<div class="container">
  <div class="row">
    <div class="col-sm-8s">
      <div class="featuredPost">
        <h2>Featured Post <hr></h2>
        <img src="Images/placeholderImg.jpg" alt="Featured Image">
        <p>
          Portland aesthetic cardigan cloud bread brooklyn food truck blog leggings quinoa street art franzen. Fixie swag artisan ennui vaporware cred. Church-key direct trade neutra try-hard tilde typewriter selfies butcher trust fund. Aesthetic iceland small batch ugh health goth you probably haven't heard of them glossier fixie before they sold out fingerstache knausgaard cloud bread slow-carb. Man bun gluten-free sartorial, thundercats blog man braid banjo. Skateboard poke hot chicken pickled, tote bag tacos 90's..<a href="#">Read More &raquo;</a>
        </p>
      </div>
    </div>

    <aside class="authorBio col-sm-4">

      <div class="widget">
        <div class="row">
          <img class="col-sm-6" src="Images/AimeeAvatar.jpg" alt="Avatar">
          <h1 class="col-sm-6">Aimée LeVally</h1>
        </div>
        <hr>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur.
        </p>
      </div><!-- widget -->

    </aside>
  </div><!-- row -->
</div>


.authorBio {
background-color: #fff4e8;
padding: 15px 50px 30px 50px;
text-align: justify;
border: 5px solid #f7ddc0;
}

.authorBio h1 {
text-align: justify;
color: #ad4b34;
}

.authorBio img {
width: 50%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}

.featuredPost {
background-color: #fff4e8;
padding: 15px 50px 30px 50px;
text-align: justify;
border: 5px solid #f7ddc0;
}

.featuredPost img {
width: 100%;
padding: 0 0 0 0;
margin: 0;
}

.featuredPost p {
padding-top: 25px;
}

Answer 1

我建议你只使用<div> 标签内的列类。

<div class="widget">
    <div class="row">
      <div class="col-sm-6">
         <img src="Images/AimeeAvatar.jpg" alt="Avatar">
      </div>
      <div class="col-sm-6">
         <h1 class="col-sm-6">Aimée LeVally</h1>
      </div>

    </div>
    <hr>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit
      esse cillum dolore eu fugiat nulla pariatur.
    </p>
  </div><!-- widget -->

Answer 2

您需要在列中创建 div，例如：

<div class="col-sm-8">
  <div class='extra_div_1'>
      <div class="featuredPost">
        <h2>Featured Post <hr></h2>
        <img src="Images/placeholderImg.jpg" alt="Featured Image">
        <p>
          <a>Portland</a>
        </p>
      </div>
  </div>
</div>

<aside class="authorBio col-sm-4">
  <div class='extra_div_2'>
      <div class="widget">
        <div class="row">
          <img class="col-sm-6" src="Images/AimeeAvatar.jpg" alt="Avatar">
          <h1 class="col-sm-6">Aimée LeVally</h1>
        </div>
        <hr>
        <p>
          Lorem
        </p>
      </div>
  </div>

</aside>

CSS：

.extra_div_1{
    padding:0px 15px 0px 15px; // or margin
}
.extra_div_2{
    padding:0px 15px 0px 15px; // or margin
}

为什么...因为当您使用列边距时 - 宽度变得更大然后 col-md-12 并且您的列跳到底部。所以你需要在列中创建额外的 div 并使用 padding/margin 在列之间留出空格。

Answer 3

问题是由于您将background-color 直接应用于引导网格.col-*-* 类。这些类使用padding 来创建每个元素之间的间距，但background 会使它看起来好像每个网格元素都立即与另一个元素擦肩而过。

相反，将您的背景放置为包装类 - 例如：

<div class="col-sm-8">
  <div class="my-well">
    <p>Hi I am some text</p>
  </div>
</div>

使用 CSS 大致如下：

.my-well {
  padding: 15px;
  background: #999;
}

Answer 4

在引导网格中始终遵循此规则：...

.col-* 必须包裹在 .row 中，并且只有 .col-* 应该是 row的直系孩子

https://www.codeply.com/go/uH5cQ5HB8X

此外，cols 应该是 div，而不是其他内联元素，例如 img 和 h1。由于填充用于创建列之间的“装订线”或间距，因此请在列的内部内容周围使用边距来增加间距。因此，您的 authorBio 和 featuredPost 应该包含在 Bootstrap 列中。

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div class="featuredPost">
                ..
            </div>
        </div>
        <aside class="col-sm-4">
            <div class="row">
                <div class="col-sm-12">
                    <div class="authorBio">
                        <div class="row">
                            <div class="col-lg-6">
                                <img>
                            </div>
                            <div class="col-lg-6">
                                ...
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </aside>
    </div>
    <!-- row -->
</div>

https://www.codeply.com/go/uH5cQ5HB8X