Question

我必须为我的网络应用程序（AngularJS + Bootstrap）组织一个非常常见的（我猜）布局。
（响应）布局由行表组成;这样，或多或少：

------------------------------------------------ row 1 ---
| pho- | description                                     |
|  to  | button1 button2 button3 button4 button5 button6 |
----------------------------------------------------------
 ...
------------------------------------------------ row N ---
| pho- | description                                     |
|  to  | button1 button2 button3 button4 button5 button6 |
----------------------------------------------------------

这是我提出的标记：

<div class="container">
  <div class="row" ng-repeat="(id, person) in persons">
    <div class="col-xs-4 col-sm-3 col-md-2 col-lg-2">
      <img ng-src="{{person.photo_src}}" />
    </div>
    <div class="col-xs-8 col-sm-9 col-md-9 col-lg-9">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div>
              {{person.description}}
          </div>
        </div>
      </div>
      <div class="row-fluid">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button1
          </button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button2
          </button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button3
          </button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button4
          </button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button5
          </button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button6
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

我对结果不满意，你可以看到......： - （

@ 1200px宽度：

@ 360px宽度：

（最后一个按钮是否存在......）。

我想在两个不同的行上分割按钮，宽度低于640（例如），但我无法弄清楚如何到达那里......我从来没有完全掌握Bootstrap＆＃ 39; s布局逻辑......： - （

任何图形/布局改进建议也会被接受......： - ）

Answer 1

我认为你应该使用12列的bootstrap概念。您应该以这种方式划分列，其中行分为12列。

对于较小的屏幕，您可以使用col-xs 我希望通过给定的代码解决上面提到的响应问题。

<div class="container">
    <div class="row" ng-repeat="(id, person) in persons">
        <div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
            <img ng-src="{{person.photo_src}}" />
        </div>
        <div class="col-xs-8 col-sm-9 col-md-9 col-lg-9">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div>
                        {{person.description}}
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button1
                    </button>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button2
                    </button>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button3
                    </button>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button4
                    </button>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button5
                    </button>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button6
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

这是一个可能适合您的网格布局..

<div class="container">
    <div class="row" ng-repeat="(id, person) in persons">
        <div class="col-xs-12 col-sm-3 col-md-2">
            <img src="http://placehold.it/100" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-9 col-md-9">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div>
                        person.description
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
                <div class="clearfix visible-sm visible-xs">&nbsp;</div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

演示：http://codeply.com/go/XWGksepx3h

另请注意，Bootstrap 3中没有row-fluid，您只需要为要支持的最小视口指定类。因此col-lg-*不需要col-md-*，因为col-md-*将用于col-ld-*和{{1}}。

Answer 3

您可以尝试将此行添加到您的CSS中：

@media (max-width: 640px) {
.col-sm-2 {
    width:33.33333333333331%;
}
}

<强> FIDDLE

Bootstrap布局，一个建议

3 个答案: