将一个大列表分解为水平多列列表 Bootstrap 3

Question

我正在尝试将两个标题下的两个 ul 工作列表“工作类别”和“工作职能”分成多个列，列的高度不一定相同，并且具有响应性。否则，单列列表太长。这两个标题和列表应该是内联的（水平的）。这显然也需要对移动设备做出响应。

做到这一点的最佳方法是什么？下面的视觉示例：

Answer 1

使用网格系统，我们可以“分解引导网格系统的单元”：

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

有效。享受！