BootStrap: Zwei Divs in einer Reihe sind nicht richtig

Question

Hier ausgerichtet zu werden, ist mein Code:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3 col-md-2"> 
       <h2><span class="label label-primary" id="notify">Notifications</span><h2> 
     </div> 
     <div class="col-sm-9 col-md-10"> 
      <!-- Split button --> 
      <button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh"> 
       &nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;&nbsp;</button> 
      <!-- Single button --> 
      <div class="btn-group"> 
       <button type="button" class="btn btn-default"> 
        Mark all as read 
       </button> 
      </div> 
      <div class="btn-group"> 
       <button type="button" class="btn btn-default"> 
        Delete 
       </button> 
      </div> 
     </div> 
    </div> 
    <hr> 
</div> 

Und hier ist die Geige.

https://jsfiddle.net/SimplytheVinay/0g8fm8u6/

Ich habe versucht, mehrere Klassenkombination. Selbst das manuelle Einstellen der Höhe von Label funktioniert nicht. Irgendwie besetzt Etikett mehr Höhe als seine Größe. Versuchte Einstellungsgrenzen auch. Kein Glück.

Ziemlich neu zu Web-Entwicklung, So korrigieren Sie mich Wenn ich etwas vermisse.

Answer 1

Sie können die H2 auch für die ersten Schritte https://jsfiddle.net/7n0t19hr/

<div class="col-sm-9 col-md-10"> 
     <h2> 


     <!-- Split button --> 
     <button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh"> 
      &nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;&nbsp;</button> 
     <!-- Single button --> 
     <div class="btn-group"> 
      <button type="button" class="btn btn-default"> 
       Mark all as read 
      </button> 
     </div> 
    <div class="btn-group"> 
      <button type="button" class="btn btn-default"> 
       Delete 
      </button> 
     </div>   
    </h2> 
    </div> 
</div> 
<hr> 
</div> 

Answer 2

Das Problem ist, dass Sie das h2-Tag nicht schließen.

<h2><span class="label label-primary" id="notify">Notifications</span><h2> 

Siehe. Fix das und Sie werden in der Lage sein, die Höhe und Polsterung oder was auch immer zu manipulieren.