HTMLブートストラップ - ディスプレイ事業部の幅

Question

の二つのボタンは50％、私は一番下にある2つのボタンを表示する必要があるモーダルウィンドウを持っているが、はとはこのためにブートストラップのボタンを使用してをキャンセル進み言います。

これらのボタンをdivの幅全体を横に並べて表示します。

ボタンの幅を50%に設定すると、ボタンの上に1つずつ表示されます。私が幅を設定した場合、例えば、49％は互いに隣り合って表示されますが、全体の幅をとっていません。

私はこれを何度も見てきましたが、その方法を理解することはできません。

ご了承ください。ここで

は私がやっているのサンプルコードです：

<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

まあは、寄せられたコメントに触発され、私は（その優雅さを判断することはできませんが、結果は私が探していたものです）作業溶液を得た：2つの矩形が占めるよう

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

これが示されています全体の幅は、画面で正しく縮小します。

これは誰にも役立つことを願っており、誰かがその「エレガンス」についてコメントしていただければ幸いです。

Answer 2

あなたがinline blocksを使用している場合、あなたは、この問題が発生します。

ラッピングを防止するためにmargin right修正を使用してみてください：

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 */ 
} 

Codepenは、あなたのシナリオの修正である：http://codepen.io/anon/pen/qZmKYr

Answer 3

これを行う 。

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

ところで、あなたはそれは古い学校のHTMLだ、ALIGN =「センター」を使用してすべきではない、ブートストラップは、すでにその代わり、この

<div align="center"> 

を行うので、このためのクラスを持っています

あなたはレをしたい場合は、この

<div class="text-center"> 

これらのdivのCOL-MD-6クラスは、50％を確立するものですかあなたはcol-md-1のような他のクラスをcol-md-12まで使うことができます。

希望するものがあります。

Answer 4

最初にbuttonにclassを追加し、float:leftとしてください。これは全体でwidthになります。あなたは、あなたの質問に答えるためにここにあなたのコードを表示する必要があります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>