ブートストラップは要素を整列します

Question

要素の左側にブートストラップで要素を貼り付けていますが、それを行う方法については考えていません（Webが提供するすべての可能な解決方法を試しました）。画面が小さくなったときに彼らに残さ

が、右の矢印は文句を言わないラベルに固執：：それは画面の大きさが十分であるとき、なかなか良さそうです

body { 
 
    font-size: 13px; 
 
    font-family: Lato; 
 
    letter-spacing: 0.015em; 
 
    word-spacing: 0.03em; 
 
    line-height: 1.5em; 
 
    background: linear-gradient(rgba(95, 102, 116, 0.8), rgba(73, 80, 95, 0.41)), url("images/carbon_fibre.png"); 
 
    background-attachment: fixed; 
 
} 
 
.textLabel { 
 
    font-size: 15px; 
 
    padding: 8px; 
 
    background-color: blue; 
 
} 
 
}

<div class="container-fluid"> 
 
    <div id="row1" class="row text-center"> 
 

 
    <!--- Position X---> 
 
    <div class="col-md-5 col-md-offset-1 col-sm-5 col-sm-offset-1 col-xs-5 col-xs-offset-1"> 
 
     <div class="col-md-2 col-sm-2 col-xs-2"> 
 
     <button id="PositionXdec" class="btn btn-default">&#x276E;</button> 
 
     </div> 
 
     <div class="col-md-8 col-sm-8 col-xs-8"> 
 
     <p class="text-center textLabel" id="positionX">X</p> 
 
     </div> 
 
     <div class="col-md-2 col-sm-2 col-xs-2"> 
 
     <button id="PositionXinc" class="btn btn-default">&#x276F;</button> 
 
     </div> 
 
    </div> 
 

 
    <!--- Rotation X ---> 
 
    <div class="col-md-5 col-xs-5"> 
 
     <div class="col-md-2 col-sm-2 col-xs-2"> 
 
     <button id="RotationXdec" class="btn btn-default">&#x276E;</button> 
 
     </div> 
 
     <div class="col-md-8 col-sm-8 col-xs-8"> 
 
     <p class="text-center textLabel" id="RotationX">RX</p> 
 
     </div> 
 
     <div class="col-md-2 col-sm-2 col-xs-2"> 
 
     <button id="RotationXinc" class="btn btn-default text-left">&#x276F;</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

nesting columnsあなたのCSSを追加した後.row EDIT

.col-*-*間を追加する必要があり、ブートストラップで、あなたが行くならば、あなたの真ん中div

NOTE

にcol-xs-offsetを追加する必要があります同じものにするcolの動作から/lgから10、そしてあなただけxsクラスに

body { 
 
    font-size: 13px; 
 
    font-family: Lato; 
 
    letter-spacing: 0.015em; 
 
    word-spacing: 0.03em; 
 
    line-height: 1.5em; 
 
    background: linear-gradient(rgba(95, 102, 116, 0.8), rgba(73, 80, 95, 0.41)), url("images/carbon_fibre.png"); 
 
    background-attachment: fixed; 
 
} 
 
.textLabel { 
 
    font-size: 15px; 
 
    padding: 8px; 
 
    background-color: blue; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div id="row1" class="row text-center"> 
 

 
    <!--- Position X---> 
 
    <div class="col-xs-5 col-xs-offset-1"> 
 
     <div class="row"> 
 
     <div class="col-xs-2"> 
 
      <button id="PositionXdec" class="btn btn-default">&#x276E;</button> 
 
     </div> 
 
     <div class="col-xs-offset-1 col-xs-7"> 
 
      <p class="text-center textLabel" id="positionX">X</p> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
      <button id="PositionXinc" class="btn btn-default">&#x276F;</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <!--- Rotation X ---> 
 
    <div class="col-xs-5"> 
 
     <div class="row"> 
 
     <div class="col-xs-2"> 
 
      <button id="RotationXdec" class="btn btn-default">&#x276E;</button> 
 
     </div> 
 
     <div class="col-xs-offset-1 col-xs-7"> 
 
      <p class="text-center textLabel" id="RotationX">RX</p> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
      <button id="RotationXinc" class="btn btn-default text-left">&#x276F;</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>