logo标签列表

Bootstrap列重叠

htmlcsstwitter-bootstraptwitter-bootstrap-3
8
我遇到了Bootstrap网格布局的问题。当我将屏幕调整为较小的布局时，我的列会相互重叠。
我不确定问题出在哪里。
以下是发生情况的图片：

SS

这是我的代码

<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 -->
你能展示一张带有问题的图片吗？ - dippas
已添加图像链接。 - goofenhour
3个回答
9
根据Bootstrap文档，每个.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>

3
我相信您的问题是有许多具有“row”类的元素没有任何列。层次结构是容器 > 行 > 列。如果没有列，就没有必要将任何内容声明为行，否则会在没有它们的情况下以异常的方式影响布局。
另一个问题是您的图像。删除“width”属性，并添加以下类属性：class="img-responsive"。有关详细信息，请参见bootstrap文档中的Images section。
我已经向“row”类添加了缺少的列，但这并没有解决问题。 - goofenhour
现在您添加了截图，我更新了我的答案。 - Rick
1
非常感谢您的帮助，我非常感激。 - goofenhour
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接