css - Bootstrap布局，一个建议

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 的布局逻辑... :-(

任何图形/布局改进建议也将被友好地接受...:-)

Answer 1

我认为您应该使用 Bootstrap 的 12 列概念。您应该以这种方式划分列，其中行分为 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>