小さな画面サイズでHTML要素（ボタン）が新しい行に移動する

Question

大きな画面サイズで同じ行にある一連のdiv（ボタンを含む）があります。画面を小さくすると、右端のボタンは他のボタンと同じ行に留まらず、新しい行にプッシュされます。

PIC2：

と私の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

PIC1

（大画面サイズのPIC1、小さな画面サイズのPIC2）下の写真を参照してください。あなたのスペース。

の代わりに：

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

試してみてください。

style="text-align: center" 

ブートストラップボタンは、デフォルトでは、インラインブロックされている、私はあなたがどのharcodedパディングなしにしたいと思うようなので、テキストのセンタリングCSSプロパティを与えることは、それらを整列させますここで問題です。 CSS

で

Answer 2

使用

box-sizing:border-box; 

これが示す内側の幅からパディングと境界を減算します。