面板標題中的嵌套列

我希望我的面板標題包含一些文本和一個按鈕，前者左對齊，後者右對齊。但只要我將類row應用於我的面板標題，它就會突破父div，並佔用我認爲是容器寬度的東西。面板標題中的嵌套列

下面是我使用的代碼：

<div class="panel panel-primary"> 
    <div class="panel-heading row"> 
     <h4 class="col-md-11">Manage Your Subscriptions</h4> 
     <div> 
      <a href="#" class="btn btn-default col-md-1" >Log out</a> 
     </div> 
    </div> 
    <div class="panel-body"> 
    </div> 
</div>

而這裏的結果：

我如何糾正呢？

來源

2015-12-21 dotslash

在我看來，你似乎只需要將「行」移動到「面板標題」中而不是在同一層上，因爲它們都具有相對的CSS定位屬性。我嘗試下面的代碼：

<div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <div class="row"> 
       <h4 class="col-md-11">Manage Your Subscriptions</h4> 
       <div class="col-md-1"> 
        <a href="#" class="btn btn-default" >Log out</a> 
       </div> 
      </div> 
     </div> 
     <div class="panel-body"> 
      Stackoverflow rocks! 
     </div> 
    </div>

，它給了我這個輸出（這是你在找什麼，我希望）：

我希望幫助

編輯：我正如其他人所建議的那樣使用「右拉」，它似乎創造了更多的麻煩，因爲它會混淆頂部/底部邊界，因爲它會使顯示塊相對於容器（我通常會建議不要這樣做，即使它可以工作爲你）。

EDIT2：將「col-md-1」類移入封裝「div」來解決按鈕邊距問題。

來源

2015-12-21 16:06:48

謝謝！這有很大幫助。我現在唯一的抱怨就是該按鈕在右側粘貼得太胖。我該如何補救？良好的填充/保證金？ – dotslash

是的，good-ol填充可以解決這個問題。我建議創建一個新的簡單的css類來添加所需的邊距，並讓「div」（包裝按鈕）標籤使用它。順便，歡迎您，很高興我能提供幫助。 –

@MarwanAlani只是想明白爲什麼說'拉右'會導致麻煩。從我的角度來看，如果按鈕內的文字較長，則您的解決方案無法正常顯示。此外，如果屏幕小於768px，按鈕會出現在左側。 – VincenzoC

可能你需要像下面的東西？

<div class="panel panel-primary"> 
    <div class="panel-heading"> 
    <div class="row"> 
     <div class="col-md-10 col-sm-10"> 
     <h4>Manage Your Subscriptions</h4> 
     </div> 
     <div class="col-md-2 col-sm-2"> 
     <a href="#" class="btn btn-default pull-right" >Log out</a> 
     </div> 
    </div> 
    </div> 
    <div class="panel-body"> 
    </div> 
</div>

讓我知道，如果它

來源

2015-12-21 16:02:37 ganeshwani

您可以使用pull-left和pull-right，而不是電網系統，因此這些部件將在單行甚至在小屏幕渲染（如果有足夠的空間）：

<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h4 class="pull-left">Manage Your Subscriptions</h4> 
     <span class="pull-right"> 
      <a href="#" class="btn btn-default" >Log out</a> 
     </span> 
     <div class="clearfix"> </div> 
    </div> 
    <div class="panel-body"> 
    </div> 
</div>

來源

2015-12-21 16:05:51 VincenzoC

面板標題中的嵌套列

回答

相關問題