JSFiddle demo

Question

我遇到了Bootstrap 3的布局问题，可以使用一些帮助。

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

在每个col-xs-1中都有一个操作按钮，使用字体真棒图标和按钮类btn-link。（在左侧删除，在右侧保存）

当视口低至col-xs-*时，我无法弄清楚为什么 - 尤其是 - 带有我的保存按钮的最右边的列被推出该行。我试过玩填充和边距，但没有运气。

如何防止这种情况发生？

JSFiddle demo

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

编辑：感谢Chandrakant Deore，这里是final working version。欣赏它！

Answer 1

添加适当的容器/容器流体类和行类。当您使用行类在列add div中嵌套列时。

你的按钮的填充会产生问题，因为它占用了一些空间并在小视口上折叠了。

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

我使用css和mediaqueries对您的代码进行了更改。这将有助于你

JSfiddle Complete Solution

＆＃13;

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

＆＃13;

Answer 2

一个错误是您没有在行周围添加容器流体包装。同样在小屏幕中，您没有包装内容（因为您使用col-xs- *类），因此，小型设备中的可用宽度无法在其中显示数据，因此您的数据（图标）溢出

在行周围添加container-fluid div，并在小屏幕中缩小图标的大小

试试这个CSS

.vertical-center {
    display: inline-flex;
    min-height: 100%;
    min-height: 250px;
}
@media only screen and (max-width: 600px) {
.col-xs-1 .btn.btn-link {
  padding: 0;
}
.col-xs-1 .btn.btn-link i {
  font-size: 1em;
}
}

Answer 3

您面临的问题基本上是因为您使用的Bootstrap网格语义不正确。在下面找到更正后的代码，肯定会有所帮助。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="author" content="Akash Kumar">
  <meta name="url" content="http://akashshivanand.com">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <style type="text/css">
    .vertical-center {
      display: inline-flex;
      min-height: 100%;
      min-height: 250px;
    }
  </style>
  <title>Bootstrap Grid</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-2 vertical-center">
        <button class="btn btn-link">
          <i class="fa fa-2x fa-trash text-red"></i>
        </button>
      </div>
      <div class="col-xs-8">
        <div class="row">
          <div class="col-lg-8 col-xs-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 col-xs-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-2 vertical-center">
        <button class="btn btn-link" data-ember-action="1284">
          <i class="fa fa-2x fa-check text-green"></i>
        </button>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

当您使用fa-2x时，我建议使用col-xs-2而不是col-xs-1，因为后者很难在较小版本的xs屏幕中容纳图标。

Answer 4

您的代码没有任何问题，但您可能希望删除或减少列填充。但是，这可能只发生在330px以下的屏幕宽度，不确定您是否真的想支持它？

例如，对于您的情况，如果行大小为300px，则理想列大小应为：

col-xs-1 = 25px（即300px * 8.33333333％）
col-xs-10 = 250px（即300px * 83.3333333％）
col-xs-1 = 25px（即300px * 8.33333333％）

总宽度理想情况下为300px
但是，由于列最小宽度为30px（因为padding-left: 15px; padding-right: 15px），因此总宽度加起来为310px，这就是为什么您的最后一列落入下一行< / p>

Answer 5

padding:0px到您的按钮，并在row

中添加按钮

.btn {
  padding: 0px !important;
}

.vertical-center {
  display: inline-flex;
  min-height: 100%;
  min-height: 250px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-1">
      <div class="row">
        <button class="btn btn-link vertical-center">
          <i class="fa fa-2x fa-trash text-red"></i>
        </button>
      </div>
    </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">
      <div class="row">
        <button class="btn btn-link vertical-center" data-ember-action="1284">
          <i class="fa fa-2x fa-check text-green"></i>
        </button>
      </div>
    </div>
  </div>
</div>

Bootstrap 3 pull-right class推出行

JSFiddle demo

5 个答案: