拉引导面板列边框

问题描述：

我有两个面板，我需要被放置在它们在列左，右最外层的位置目前，他们是这样的：http://i.imgur.com/1fveLek.png 拉引导面板列边框

第一场小组应该拔掉向左，以便与文本对齐，而另一个面板应该朝另一个方向拉，再次与文本对齐。我尝试使用“拉右”和“左拉”类，但是这并不奏效。

这是所述板的HTML：

<div class="col-sm-6"> 
           <div id="panelAddresse" class="panel panel-default"> 
            <div class="panel-heading"> 
             <h3 class="panel-title">Addresse</h3> 
            </div> 
            <div class="panel-body"> 
             <p><strong>Berberisvej 90, Hune</strong></p> 
             <p><strong>9492 Blokhus</strong></p> 
            </div> 
           </div> 
          </div> 
          <div class="col-sm-6"> 
           <div id="panelLinks" class="panel panel-default"> 
            <div class="panel-heading"> 
             <h3 class="panel-title">Links</h3> 
            </div> 
            <div class="panel-body"> 
             <p><a href="https://www.krak.dk/scripts/ruteplan/krakdk_ruteplan_forside.asp">Kraks Ruteplan</a></p> 
             <p><a href="http://www.visitjammerbugten.dk/jammerbugten/blokhus-hune">Turistbureau</a></p> 
            </div> 
           </div> 
          </div>

的两列嵌套在另一个6-宽度柱。

请清除你的问题。您的面板已经左右两侧。 – Zeshan

我希望他们进一步到每一边，以便与顶部的文字对齐。他们不应该像现在这样集中。 – Leth

添加此css。 p { text-align：center; } 。面板标题{ text-align：center; } – Zeshan

答

那么，你的代码是这样的

<div class="row"> 
    <div class="col-sm-6"> 
     TEXT CONTENT 
     <div class="col-sm-6"> 
      Panel 
     </div> 
     <div class="col-sm-6"> 
      Panel 
     </div> 
    </div> 
</div>

如果是的话，你应该把它改为这个

<div class="row"> 
    <div class="col-sm-6"> 
     TEXT CONTENT 
     <div class="row"> 
      <div class="col-sm-6"> 
       Panel 
      </div> 
      <div class="col-sm-6"> 
       Panel 
      </div> 
     </div> 
    </div> 
</div>

因此，有额外的div.row到连.COL-SM-6填充（15px - 15px）。该结构应始终如此，以便.col-sm-X位于.row格内。 Bootstrap中的列div在左侧和右侧总是有15px的填充，在这种情况下创建了一个“双填充”，因为列div下面有列div。

谢谢你的回答和解释，解决了我的问题！ – Leth

拉引导面板列边框

相关推荐