HTML Bootstrap - Anzeige zwei Tasten 50% der Breite des Div

Question

Ich habe ein modales Fenster, das zwei Schaltflächen am unteren Rande angezeigt werden muss, sagt Gehen und Abbrechen für diese Bootstrap der Taste.

Ich möchte diese Tasten nebeneinander die gesamte Breite des div besetzen.

Wenn ich die Breite der Tasten auf 50% einstelle, werden sie übereinander angezeigt. Erst wenn ich die Breite festlege, sagen wir, 49% werden sie nebeneinander angezeigt, aber dann nehmen sie nicht die ganze Breite.

Ich habe das schon oft gesehen, kann aber nicht herausfinden, wie es geht.

Jeder Vorschlag wird geschätzt werden.

Hier ist ein Beispielcode von dem, was ich tue:

<div align="center"> 
    <button type="button" class="btn btn-warning" ng-click="Cancel()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Cancel</font></button> 
    <button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Proceed</font></button> 
</div> 

Answer 1

Nun, durch die empfangenen Kommentare inspiriert, habe ich eine Arbeitslösung (kann nicht seine Eleganz beurteilen, aber das Ergebnis ist das, was ich gesucht habe):

<table style="width:100%"> 
    <tbody> 
     <tr> 
      <td class=" btn-warning" ng-click="Cancel()" aria-haspopup="true" aria-expanded="false" style="width:50%;text-align:center;padding:10px 0 10px 0;cursor:pointer"> 
       <font size="6">Cancel</font> 
      </td> 
      <td class=" btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%;text-align:center;padding:10px 0 10px 0;cursor:pointer"> 
       <font size="6">Proceed</font> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Dies wird gezeigt, wie zwei Rechtecke besetzt die ganze Breite, und richtig mit dem Bildschirm schrumpfen.

Hoffe, das ist für jeden hilfreich, und wird es zu schätzen wissen, wenn jemand über seine "Eleganz" kommentieren.

Answer 2

Wenn Sie inline blocks dann verwenden, werden Sie dieses Problem auftritt.

Versuchen Sie, eine margin right fix mit der Verpackung zu verhindern:

HTML

<div class="blocks"> 
    <div class="block block-1">Block 1</div> 
    <div class="block block-2">Block 2</div> 
</div> 

CSS

.block { 
    display: inline-block; 
    width: 50%; 
} 

.block-1 { 
    margin-right: -0.2em; /* spacing fix */ 
} 

Hier ist ein Codepen mit einem Fix für Ihr Szenario: http://codepen.io/anon/pen/qZmKYr

Answer 3

Mach das .

<div align="center"> 
    <div class="row"> 
    <div class="col-md-6"> 
     <button type="button" class="btn btn-warning" ng-click="Cancel()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Cancel</font></button> 
    </div> 
    <div class="col-md-6"> 
     <button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Proceed</font></button> 
    </div> 
</div> 

By the way, sollten Sie nicht = "center" mit ausrichten werden, das ist alte Schule HTML, Bootstrap hat bereits eine Klasse für diese, anstatt dies zu tun

<div align="center"> 

tun dies

<div class="text-center"> 

die col-md-6-Klasse auf diese divs sind diejenigen, die die 50% schaffen, wenn Sie les wollen s können Sie andere Klassen wie col-md-1 verwenden sie alle bis zu col-md-12

Hoffe, dass hilft.

Answer 4

Fügen Sie eine class auf der ersten button hinzu und geben Sie float:left. Es wird ganze width nehmen.Sehen Sie sich die Arbeits Demo in Bootply.

.hell { 
 
    float: left 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<div align="center"> 
 
    <button type="button" class="btn btn-warning hell" ng-click="Cancel()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Cancel</font> 
 
    </button> 
 
    <button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Proceed</font> 
 
    </button> 
 
</div>