Question

我遇到了bootstrap网格布局的问题。当我将屏幕调整为较小的布局时，我的列彼此重叠。

我不确定是什么问题。

以下是正在发生的事情的图片：

这是我的代码

<div class='container-fluid'>

  <div class="row"> <!-- 1 -->
    <div class="col-sm-5 col-md-4">
      <h1>JOHN SMITH</h1>
    </div>
  </div>

  <div class='row'> <!-- 2 -->
    <div class="col-sm-5 col-md-4">
      <h2>VULCAN FLATBED</h2>
    </div>
  </div>

  <div class="row"> <!-- 3 -->
    <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">

      <div class='row'>
          <img src="vulcan.jpg" alt="vehicle image" width='391'/>
      </div>
      <div class='row'>
        <button type='submit'>
          <img src="book_now_button@2x.png" alt="book now">
        </button>
      </div>

    </div>

    <div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;"> <!-- RIGHT SIDE -->

      <div class='row'>

        <h3>CAN HELP WITH</h3>
        <p>LIFTING & YARD WORK</p>
      </div>
      <div class='row'>
        <h3>AVAILABLE</h3>
        <p>ALL WEEKENDS</p>
      </div>
      <div class='row'>
        <h3>NOTE</h3>
        <p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS,
       WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN
       ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU
       SOME HELP WITH LIFTING OR YARDWORK I AM YOUR GUY. BOOK NOW TO CONTACT
       ME AND LET ME HELP YOU OUT.
        </p>
      </div>
    </div>
  </div> <!-- end 3 -->

  <hr>
</div> <!-- end wrap -->

Answer 1

根据Bootstrap Docs，对于每个.row，您需要有一个.col-*-*作为直接孩子，但在其中一些孩子中却没有。这导致溢出。

另外，不要使用html标记width，不推荐使用它。使用bootstrap中的class="img-responsive"来实现max-width:100%

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
  <div class="row">
    <!-- 1 -->
    <div class="col-sm-5 col-md-4">
      <h1>JOHN SMITH</h1>
    </div>
  </div>
  <div class='row'>
    <!-- 2 -->
    <div class="col-sm-5 col-md-4">
      <h2>VULCAN FLATBED</h2>
    </div>
  </div>

  <div class="row">
    <!-- 3 -->
    <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">

      <div class='row'>
        <div class="col-xs-12">
          <img class="img-responsive" src="//lorempixel.com/500/200" alt="vehicle image" />
        </div>
      </div>
      <div class='row'>
        <div class="col-xs-12">
          <button type='submit'>
            <img src="book_now_button@2x.png" alt="book now">
          </button>
        </div>
      </div>
    </div>
    <div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;">
      <!-- RIGHT SIDE -->

      <div class='row'>
        <div class="col-xs-12">
          <h3>CAN HELP WITH</h3>
          <p>LIFTING & YARD WORK</p>
        </div>
      </div>
      <div class='row'>
        <div class="col-xs-12">
          <h3>AVAILABLE</h3>
          <p>ALL WEEKENDS</p>
        </div>
      </div>
      <div class='row'>
        <div class="col-xs-12">
          <h3>NOTE</h3>
          <p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS, WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU SOME HELP WITH LIFTING OR YARDWORK I
            AM YOUR GUY. BOOK NOW TO CONTACT ME AND LET ME HELP YOU OUT.
          </p>
        </div>
      </div>
    </div>

Answer 2

我相信你的问题是你有很多元素与＆＃34;行＆＃34;没有任何专栏的班级。层次结构是容器＆gt;行＆gt;山坳。如果没有列，则不需要将任何内容声明为行，并且在没有列的情况下以不寻常的方式影响布局。

另一个问题是你的形象。删除＆＃34;宽度＆＃34;属性，并添加以下类属性：class =＆＃34; img-responsive＆＃34;。有关详细信息，请参阅bootstrap文档的Images section。

Answer 3

就我而言，我对CSS中的所有元素都使用了box-sizing: content-box;。这就是为什么填充会在元素的整体计算宽度上产生问题。因此，我将其从box-sizing: border-box;更改为box-sizing: content-box;

参考：
https://getbootstrap.com/docs/4.0/getting-started/introduction/#box-sizing

bootstrap列重叠

3 个答案: