将一个大列表分成水平 multi-column 列表 Bootstrap 3

Question

我想把两个headers、"Job Categories"和"Job Function,"下的两个ul jobs列表分成多列，列不一定等高，响应式。否则，单列列表太长。这两个 headers 和列表应该是内联的（水平的）。这显然也需要对移动设备做出响应。

最好的方法是什么？下面的视觉示例：

Answer 1

<div class="col-md-6">

Bootstrap 在 class .container 中将 page/div 分解为 12 "columns"。这样你就把一半的 space 给了你的 headers 之一，它会是 mobile-friendly.

我希望这不是过于简单化，但鉴于现有信息，它似乎是正确的。

Answer 2

试试这个

<ul class="col-md-6 col-sm-6 col-xs-12">
    <li class="col-xs-12"><h2>Job Function</h2></li>
    <li class="col-md-6 col-sm-6 col-xs-12">List 1</li>
    <li class="col-md-6 col-sm-6 col-xs-12">List 2</li>
<ul>

<ul class="col-md-6 col-sm-6 col-xs-12">
    <li class="col-xs-12"><h2>Job Categories</h2></li>
    <li class="col-md-6 col-sm-6 col-xs-12">List 1</li>
    <li class="col-md-6 col-sm-6 col-xs-12">List 2</li>
<ul>

Answer 3

使用网格系统，可以 "break-up the cells" 的 bootstrap 网格系统：

<div class="container">
      <!--  Content Area-->
      <div class="row">
        <div class="col-md-5 col-sm-6">
          <div class="row">
            <h2 class="">Job Functions</h2>
          </div>
          <div class="row">
            <div class="col-md-4 col-sm-4">
              <div class="row content">
                <ul class="list-unstyled">
                 <li>,</li>
                 <li>,</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-sm-4">
              <div class="row content">
                <ul class="list-unstyled">
                 <li>,</li>
                 <li>,</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-5">
          <div class="row">
            <h2 class="">Job Categories</h2>
          </div>
          <div class="row">
            <div class="col-md-4 col-sm-4">
              <div class="row content">
                <ul class="list-unstyled">
                 <li>,</li>
                 <li>,</li>
                </ul>
              </div>
            </div>
            <div class="row">
            <div class="col-md-4 col-sm-4">
              <div class="row content">
                <ul class="list-unstyled">
                 <li>,</li>
                 <li>,</li>
                </ul>
              </div>
            </div>
            <div class="row">
            <div class="col-md-4 col-sm-4">
              <div class="row content">
                <ul class="list-unstyled">
                 <li>,</li>
                 <li>,</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
</div>

成功了。享受吧！

将一个大列表分成水平 multi-column 列表 Bootstrap 3

Breaking one big list into horizontal multi-column list Bootstrap 3

html

css

html-lists

twitter-bootstrap

twitter-bootstrap-3