Bootstrap - 在Bootstrap中對齊標籤和H2

我想使用Bootstrap 3垂直對齊h2-Heading和href-style-button - 我一直在試驗這個小時。我如何正確地做到這一點？這應保持響應...Bootstrap - 在Bootstrap中對齊標籤和H2

標題必須在左邊對齊，href對齊到右邊（這就是爲什麼我用拉右類），但兩者的文本應在同一個思路水平線上。

<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.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
    <div class="col-md-6"> 
 
    <h2><b>Clubnews</b></h2> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    <a class="btn btn-sm btn-default pull-right" href="#"> 
 
     <i class="fa fa-plus-square"></i> neuer Beitrag 
 
    </a> 
 
    </div> 
 
</div>

來源

2016-02-25 larso

如果你想我們可以幫助你更快，請向我們提供您的代碼內的jsfiddle鏈接。 –

使用'class =「pull-left」'到'h2'。 –

有了CSS的一些幫助：https://jsfiddle.net/Lq6u5401/ –

完整的解決方案：

默認情況下，H2有一些填充，因此如果要匹配等於我添加了一個風格到第二div。

<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.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
    <div class="col-md-6"> 
 
    <h2 class="pull-left"><b>Clubnews</b></h2> 
 
    </div> 
 
    <div class="col-md-6" style="padding: 15px"> 
 
    <a class="btn btn-sm btn-default pull-right" href="#"> 
 
     <i class="fa fa-plus-square"></i> neuer Beitrag 
 
    </a> 
 
    </div> 
 
</div>

來源

2016-02-25 15:59:20

填充是我錯過的重要內容，謝謝！ – larso

Bootstrap - 在Bootstrap中對齊標籤和H2

回答

相關問題