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，并使用填充/边距在列之间创建空格。

Answer 3

问题是由于您将background-color直接应用于Bootstrap Grid .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

始终使用Bootstrap网格遵循此规则：...

.col-*必须包含在.row中，且只有.col-* row的直接孩子

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

此外，cols应为div，而不是img和h1等其他内联元素。由于填充用于创建＆＃34; gutter＆＃34;或列之间的间距，使用围绕列的内部内容的边距来增加间距。因此，您的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

如何在Bootstrap列之间放置空格？

4 个答案: