html - Bootstrap 中的网格似乎重叠

Question

我设置了一个网格系统并且工作正常，但中间的柱子似乎渗入了右边的柱子。我似乎无法弄清楚为什么。右侧的列需要比页面的其余部分具有更大的高度。从图像中突出显示的文本可以看出，右侧的列与 12 列网格的其余部分不一致。我正在使用最新版本的 Bootstrap

这是代码

报纸

        <div class="col-md-12">

        <div class="row">
          <div class="col-md-2">
            <h13 class="text-center">Here's Why 9/11 Conspiracy</h13>
          </div>

          <div class="text-center">
            <h12 class="col-md-8">Newspaper</h12>
          </div>

          <div class="col-md-2">
            <h6 class="text-center">Here's Why 9/11 Conspiracy</h6>
          </div>
          <hr>

        </div>
        <hr><hr>
        </div>


    <!-- Main Body -->
    <div class="col-md-12">
    <div class="col-md-9">
    <div class="row">
    <div class="row">

      <div class="col-md-4">
       <h11 class="text-center">Here's Why 9/11 Conspiracy Theories Still Thrive In America</h11>
       <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Mr.Man</i></h5>
       <hr>
        <p>Dublin, It was a sunny and clear Tuesday morning in Knoxville, Tennessee. Sitting in the kitchen of my girlfriend's apartment, I was eating a bowl of cereal -- Honey Nut Cheerios, I still remember -- and browsing the web before making the 15-minute drive to campus for class. I was looking for news about the big game, a top 10 SEC matchup between the Tennessee Volunteers and the Florida Gators. I was a junior at the University of Tennessee, and just 10 days earlier I'd broken my wrist during the season opener. It required surgery, so I was going to be sidelined for the next six to eight weeks. Once on the Internet, I caught my first glimpse of the North Tower on fire, with smoke billowing from the top floors. I remember taking a moment to say a prayer for everyone affected. Then, right before my eyes, a plane flew into another building, the South Tower. I couldn't believe what I was seeing. I was horrified. But I didn't know exactly what this meant for my country.I was a junior at the University of Tennessee, and just 10 days earlier I'd broken my wrist during the season opener. It required surgery, so I was going to be sidelined for the next six to eight weeks. I couldn't believe what I was seeing. I was horrified. But I didn't know exactly what this meant for my country.</p>
     </div>

      <div class="col-md-8">
      <h10>Terrorists are plotting to blow up five planes</h10>
      <hr>

        <p style='font-family: "DroidSerif",serif;'><span class="firstcharacter">T</span>he threat has been taken so seriously it came close to leading to an outright ban on all hand luggage, a senior insider has revealed. Mobile phones and electronic devices could still be banned from plane cabins, with the threat of a 9/11-style coordinated attack on London and other major cities feared imminent. The warning comes as Whitehall officials admit that a terror strike on the UK is now "almost inevitable" particularly with British jihadis returning from fighting alongside the Islamic State in Iraq and Syria. An airport security source told the Sunday Express: "We've been told that five planes are being targeted in a high profile hit before Christmas. They've been waiting for the big one. "We have many scares but this one nearly got hand baggage pulled from all airlines. The threat is still alive and real." The plot, which has been known about for the past two months, is thought to involve Islamists smuggling bombs on to planes bound for major European destinations before Christmas.The well-placed security insider said talks had been held about how to deal with it, with suggestions made to ban hand luggage. The source said: "High level negotiations are continuing at Governmental level but at the moment there has been little done to respond. "There is paralysis because of the difficulty of banning hand luggage which is one of the strongest weapons we have against the new threats.
        "All electronics may be banned from hand luggage and placed in the hold, that has been considered, and there has been behaviour analysis training at airports but while it's effective, it's difficult to roll out quickly and is not a sufficient safety net. "The threat is aimed at Europe. The U.S has improved their security over the summer but we have not."Everyone is expecting something catastrophic very soon".</p>

      </div>

    </div>

    <!-- Bottom Stories -->
    <hr>
    <hr  style="height:0.3em;" color='#3090C7' />

  <div class="row">

  <div class="col-md-3">
    <h13><i>?Story</i></h13>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non</p>
  </div>

   <div class="col-md-3">
    <h13><i>?Story</i></h13>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non</p>
  </div>

   <div class="col-md-3">
    <h13><i>?Story</i></h13>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non</p>
  </div>

  <div class="col-md-3">
    <h13><i>?Story</i></h13>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non</p>
  </div>

  </div>
  </div>

</div>


 <!-- Right Stories -->
<div ="row">
<div class="col-md-3">

    <h11>Trending Stories</h11>

    <hr>

  <h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>

  <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit <b> amet risus.</b></p>

  <h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>

  <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit <b> amet risus.</b></p>

  <h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>

  <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit <b> amet risus.</b></p>


</div>
</div>

</div>

</div>

Answer 1

这是(我认为)您要完成的任务的简化版本:

Bootply Example

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <div class="well">
        <p>Left Story</p>
      </div>
    </div>
    <div class="col-md-8">
      <div class="well">
        <p>Main Story</p>
      </div>
    </div>
    <div class="col-md-2">
      <div class="well">
        <p>Right Stories</p>
      </div>
    </div>
  </div>
  <hr>

  <div class="row">
    <div class="col-md-3">
      <div class="well">
        <p>Bottom Story 1</p>
      </div>
    </div>

    <div class="col-md-3">
      <div class="well">
        <p>Bottom Story 2</p>
      </div>
    </div>

    <div class="col-md-3">
      <div class="well">
        <p>Bottom Story 3</p>
      </div>
    </div>

    <div class="col-md-3">
      <div class="well">
        <p>Bottom Story 4</p>
      </div>
    </div>
  </div>
</div>

注意事项

well 类仅用于显示填充和布局。它们都可以删除而不影响布局。

希望这对您有所帮助!