HTML Bootstrap - Ekran Div genişliği

Question

iki düğme% 50 ı altta iki düğmeleri görüntülemek için gereken kalıcı bir pencere var, ve bunun için Bootstrap düğmesi kullanılarak İptal Devam söylüyorlar.

Bu düğmelerin div'in tüm genişliğini işgal ederek yan yana olmasını istiyorum. Ben 50% olmak düğmelerin genişliğini ayarlarsanız

, diğer üst üste gösterilmektedir. Sadece genişliği belirlediğimde,% 49'u yan yana gösteriliyorlar, ama sonra tüm genişliği almıyorlar.

Bunu defalarca gördüm, ancak nasıl yapılacağını anlayamıyorum.

Herhangi bir öneri takdir edilmelidir.

<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

Eh, alınan yorumların esinlenerek, ben (zarafeti hakim olamaz, ancak sonuç aradığım buydu) bir çalışma çözüm var: iki dikdörtgenler işgal olarak

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

Bu gösterilir tüm genişlik ve ekran ile doğru bir şekilde küçülüyor.

Umut bu herkese yardımcı olduğunu ve birisi onun "zarafet" hakkında yorum yaparsanız takdir edecektir.

Answer 2

Eğer inline blocks kullanıyorsanız o zaman bu konuyu karşılaşacak: Burada

ne yapıyorum örnek bir koddur.

kaydırma engellemek için bir margin right düzeltme kullanmayı deneyin:

HTML

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

CSS İşte

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

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

bir Codepen senaryonuz için bir düzeltme ile geçerli: http://codepen.io/anon/pen/qZmKYr

Answer 3

Bunu yap . , Sen, o eski okul HTML var = "center" align kullanarak olmamalıdır arada

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

, önyükleme zaten yerine bu

<div align="center"> 

yapmanın, bunun için bir sınıf vardır

Eğer les istiyorsanız,% 50 tesis olanlar bu bölümlerde; bu

<div class="text-center"> 

col-md-6 sınıfıdır do Eğer col-md-1 gibi diğer sınıfları kullanabilir s hepsi yukarı col-md-12 için yardımcı olur

Umut.

Answer 4

İlk button numaralı telefona class numaralı telefon numarasını ekleyin ve float:left numaralı telefonu verin. width ürününü yanınıza alın.Eğer soruyu cevaplamak için buraya kodu görüntülenecektir 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>