Bootstrap - Выровнять тег и H2 в Bootstrap

Question

Я хочу, чтобы кнопка h2-Heading и href-style была вертикально выровнена с помощью Bootstrap 3 - я экспериментировал с этим в течение часа. Как мне это сделать правильно? это должно сохранять отзывчивость ...

заголовок должен быть выровнен слева, href выровнен справа (поэтому я использовал класс pull-right), но текст обоих должен находиться на одной и той же горизонтальной линии мысли.

<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>

Answer 1

Комплексное решение:

По умолчанию 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>