Bootstrap 面板和列

Question

我的网站 - http://thearmspark.eu/ - 正在使用 Bootstrap 面板来容纳每行 3 个盒子。我正在使用下面的代码：

    <!-- Row 1 News-->

<div class="row row-same-height" style="margin-top: 25px;">
   <div class="col-lg-12"></div>
       <div class="col-md-4">
           <div class="panel panel-primary">
               <div class="panel-heading">
                   <h4><i class="fa fa-newspaper-o"></i>Title<h4>
               </div>
               <div class="panel-body" style="min-height: 200px;max-height: 200px;">
                    <p>...</p>
                    <br>
                    <a href="http://thearmspark.eu/cms/?action=viewArticle&articleId=<?php echo $id1 ?>" class="btn btn-primary">Read More</a>
                </div>
        </div>
</div>

最上面的三个盒子都是这个样子的。

第二行的三个框都有些不同，因为我已经包含了 Twitter 报价和 Twitter 时间线 - 请参阅 theArmsPark.eu

见第 2 行框 1 代码：

<!-- Row 2 Social Media-->
<div class="row row-same-height">
   <div class="col-lg-12">
   </div>
   <div class="col-md-4">
      <div class="panel panel-primary">
         <div class="panel-heading">
             <h4><i class="fa fa-twitter"></i> Best of Twitter</h4>
         </div>
         <div class="panel-body" style="min-height: 263px; max-height: 263px; margin-right: -15px; margin-left: -15px; margin-top: -25px"> <!-- To add scroll insert in style= "overflow-y: scroll";-->
          <!-- Insert Twitter code here -->
          <blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p lang="en" dir="ltr">Maybe things are slowly beginning to take shape for the coaching team. Wish the man all the very best.&#10;<a href="http://t.co/qSb9omkl3o">http://t.co/qSb9omkl3o</a></p>&mdash; Steve Matthews (@LastWordSteveM) <a href="https://twitter.com/LastWordSteveM/status/613772129994174464">June 24, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
      <!-- To here -->
   </div>
 </div>
</div>

谁能解释为什么我的面板不对齐？

干杯，

安德鲁

Answer 1

您的H4 标记未在第一个面板中的 TITLE 和第二个面板中的内联样式 margin-right: -15px; margin-left: -15px; margin-top: -25px 之后关闭 (</H4>)。应该有帮助

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row row-same-height" style="margin-top: 25px;">
    <div class="col-lg-12"></div>
    <div class="col-md-4">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h4><i class="fa fa-newspaper-o"></i> Title</h4>
        </div>
        <div class="panel-body" style="min-height: 200px;max-height: 200px;">
          <p>...</p>
          <br>
          <a href="http://thearmspark.eu/cms/?action=viewArticle&articleId=<?php echo $id1 ?>" class="btn btn-primary">Read More</a> </div>
      </div>
    </div>
  </div>
  
  <!-- Row 2 Social Media-->
  <div class="row row-same-height">
    <div class="col-lg-12"> </div>
    <div class="col-md-4">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h4><i class="fa fa-twitter"></i> Best of Twitter</h4>
        </div>
        <div class="panel-body" style="min-height: 263px; max-height: 263px;"> <!-- To add scroll insert in style= "overflow-y: scroll";--> 
          <!-- Insert Twitter code here -->
          <blockquote class="twitter-tweet" data-cards="hidden" lang="en">
            <p lang="en" dir="ltr">Maybe things are slowly beginning to take shape for the coaching team. Wish the man all the very best.&#10;<a href="http://t.co/qSb9omkl3o">http://t.co/qSb9omkl3o</a></p>
            &mdash; Steve Matthews (@LastWordSteveM) <a href="https://twitter.com/LastWordSteveM/status/613772129994174464">June 24, 2015</a></blockquote>
          <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
          <!-- To here --> 
        </div>
      </div>
    </div>
  </div>
</div>