Bootstrap对齐元素

Question

我想在引导程序中将一个元素粘贴到其单元格的左侧，但不知道如何执行它（并尝试了Web提供的所有可能的解决方案）。 当屏幕足够大时，它看起来很不错：

但是当屏幕变小时，右箭头不会粘到它们留下的标签上：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在引导程序中nesting columns时，您需要在.row之间添加.col-*-*

修改

添加CSS后，您可能需要将col-xs-offset添加到中间div

注意

如果您要从col到xs / md拥有相同的lg 行为，那么您可以使用{{ 1}}类

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