css - Bootstrap 3 pull-right 类推出行

Question

我遇到了 Bootstrap 3 的布局问题，需要一点帮助。

在我的行中，我有如下三列:[col-xs-1] [col-xs-10] [col-xs- 1]

在每个 col-xs-1 中都有一个操作按钮，使用字体很棒的图标和 btn-link 按钮类。 (左边删除，右边保存)

我不明白为什么 - 尤其是当视口(viewport)缩小到 col-xs-* 大小时 - 最右边的列和我的保存按钮被按下过去的行。我尝试过填充和边距，但没有成功。

如何防止这种情况发生？

JSFiddle demo

如果这是一个骗局，我深表歉意 - 我搜索过但没有看到任何类似的东西，但已经晚了，我累了。

编辑:感谢 Chandrakant Deore，这里是 final working version .欣赏它!

Answer 1

添加适当的container/container-fluid 类和row 类。 当您在列中嵌套列时，添加带有 row 类的 div。

您的按钮的填充会产生问题，因为它会占用一些空间并在小视口(viewport)上塌陷。

如果您的要求没有任何问题，请尝试使用 col-xs-2。

我已经使用 css 和媒体查询对您的代码进行了更改。 这对你有帮助

JSfiddle Complete Solution

<div class="container">

<div class="row">
      <div class="col-xs-1 vertical-center col-padding-left5">
        <button class="btn btn-link padding0 ">
          <i class="fa fa-2x fa-trash text-red small-font"></i>
        </button>
      </div>
      
      <div class="col-xs-10">
        
        <div class="row">
          <div class="col-lg-8 no-padding">
            <label>Some input</label><br>
            <input class="form-control no-padding">
          </div>
          <div class="col-xs-4">
            <label>And</label><br>
            <input type="number" class="form-control">
          </div>
          <div class="col-xs-8">
            <label>More Input</label><br>
            <input class="form-control">
          </div>
          <div class="col-lg-8 no-padding">
            <label>Some input</label><br>
            <input class="form-control no-padding">
          </div>
          <div class="col-xs-4">
            <label>And</label><br>
            <input type="number" class="form-control">
          </div>
          <div class="col-xs-8">
            <label>More Input</label><br>
            <input class="form-control">
          </div>
        </div>
        
      </div>
        
      <div class="col-xs-1 vertical-center col-padding-right5">
        <button class="btn btn-link padding0 " data-ember-action="1284">
          <i class="fa fa-2x fa-check text-green small-font"></i>
        </button>
      </div>
    </div>
</div>