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

在第一个面板中的“TITLE”之后，H4标记未关闭（</H4>），在第二个面板中，margin-right: -15px; margin-left: -15px; margin-top: -25px内联<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>  <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;">   <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.
<a href="http://t.co/qSb9omkl3o">http://t.co/qSb9omkl3o</a></p> — 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>  </div> </div> </div> </div> </div>。应该帮忙

var grid = {
    height: 100,
    width: 200,
    get: function(p, q){
        return xyz;
    }

}

Bootstrap面板和列

1 个答案: