Question

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

enter image description here

这是代码

报

        <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类仅用于显示填充和布局。它们都可以在不影响布局的情况下删除。

希望这有帮助！

Bootstrap中的网格似乎重叠

1 个答案: