Question

我想在bootstrap中并排显示2列（未堆叠）。我希望它以这种方式安排在移动屏幕尺寸＆＃34; XS＆＃34;太。该示例按照我想要的方式在SM上工作，但不是XS屏幕尺寸。还附上了我想要实现的目标。以及我到目前为止的HTML。我正在使用默认的bootstrap CSS和JS。

sketch

    <div class="container-fluid">
  <nav class="row" >
    <div class="col-xs-12 col-sm-12">
    <h2>Main Navigation</h2>
        <div class="row">
            <div class="col-xs-6 col-sm-6">
            <ul data-menuTitle="Main Menu" >
              <li><a accesskey="a" href="#">Ride Bike</a></li>
              <li><a accesskey="b" href="#">Get Fit</a></li>
              <li><a accesskey="c" href="#">Visit Store</a></li>
              <li><a accesskey="d" href="#">Ride Bike</a></li>
              <li><a accesskey="e" href="#">Get Fit</a></li>
              <li><a accesskey="f" href="#">Visit Store</a></li>
            </ul>
            </div>
            <div class="col-xs-6 col-sm-6">
            <ul data-menuTitle="Main Menu" >
              <li><a accesskey="g" href="#">Ride Bike</a></li>
              <li><a accesskey="h" href="#">Get Fit</a></li>
              <li><a accesskey="i" href="#">Visit Store</a></li>
              <li><a accesskey="j" href="#">Ride Bike</a></li>
              <li><a accesskey="k" href="#">Get Fit</a></li>
              <li><a accesskey="l" href="#">Visit Store</a></li>
            </ul>
            </div>
          </div> <!-- end of nested row nav-->
    </div>
  </nav><!-- end of row nav-->
</div><!-- end of container -->

Answer 1

您有col-sx-*，它是col-xs-*。 col-sm-12与col-xs-12的设置相同，设置如何设置，您不需要两者。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <nav class="row">
    <div class="col-xs-12">
      <h2>Main Navigation</h2>

      <div class="row">
        <div class="col-xs-6">
          <ul data-menuTitle="Main Menu">
            <li><a accesskey="a" href="#">Ride Bike</a>

            </li>
            <li><a accesskey="b" href="#">Get Fit</a>

            </li>
            <li><a accesskey="c" href="#">Visit Store</a>

            </li>
            <li><a accesskey="d" href="#">Ride Bike</a>

            </li>
            <li><a accesskey="e" href="#">Get Fit</a>

            </li>
            <li><a accesskey="f" href="#">Visit Store</a>

            </li>
          </ul>
        </div>
        <div class="col-xs-6">
          <ul data-menuTitle="Main Menu">
            <li><a accesskey="g" href="#">Ride Bike</a>

            </li>
            <li><a accesskey="h" href="#">Get Fit</a>

            </li>
            <li><a accesskey="i" href="#">Visit Store</a>

            </li>
            <li><a accesskey="j" href="#">Ride Bike</a>

            </li>
            <li><a accesskey="k" href="#">Get Fit</a>

            </li>
            <li><a accesskey="l" href="#">Visit Store</a>

            </li>
          </ul>
        </div>
      </div>
      <!-- end of nested row nav-->
    </div>
  </nav>
  <!-- end of row nav-->
</div>
<!-- end of container -->

并排显示2列，Bootstrap XS

1 个答案: