Daha küçük ekran boyutlarında yeni satıra hareket eden HTML elemanları (düğmeler)

Question

Geniş ekran boyutlarında aynı satırda bulunan bir dizi div (düğmeler içeren) var. Ekranı küçültmek ve küçültmek için, diğer düğmelerle aynı satırda kalmak yerine en sağdaki düğme yeni bir satıra itilir. (Büyük ekran boyutu Pic1, küçük ekran boyutu pic2) aşağıdaki resimlere bakın

pic1:

pic2:

ve benim html:

<div class="col-xs-12 clearfix"> 
    <div class="col-xs-4" style="padding-left: 290px"> 
     <button class="btn btn-default" ng-click="createProject()">New 
      Project</button> 

    </div> 
    <div class="col-xs-4" align="center" 
     ng-controller="CsvImportController" 
     style="display: inline-block; padding-left: 200px"> 

     <a href="#" class="btn btn-default btn-file" 
      onclick="document.getElementById('fileBrowser').click(); return false;"> 
      Select CSV File </a> 
     <input id="fileBrowser" style="visibility: hidden;" 
      class="btn btn-default btn-file" type="file" file-input="files" /> 
    </div> 
    <div class="col-xs-4" align="center" style="padding-left: 110px"> 
     <a class="btn btn-default" href="projects.html#/projects">Browse 
      Projects</a> 
    </div> 
</div> 

Answer 1

Dolgu tüketen senin alanın.

yerine:

align="center" style="padding-left: 110px" 

Dene:

style="text-align: center" 

Bootstrap düğmeleri o yüzden harcoded padding'siz istiyorum düşünüyorum metin merkezleme css özelliği onları hizaya edecek vererek varsayılan olarak inline-blok olan burada sorun var.

Answer 2

kullanımı

gösteren, bu iç genişlik dolguyu ve sınır çıkarır Css içinde

box-sizing:border-box; 

.