Дисплей 2 столбца бок о бок, Bootstrap XS

Question

Я хотел бы показать 2 столбца бок о бок (не сложены) в бутстрапе. Я хочу, чтобы он был устроен таким образом на экране мобильного экрана «XS». Пример работает так, как я хочу на SM, но не размером экрана XS. Также прилагается эскиз того, чего я хочу достичь в конце. Как и HTML, который у меня есть до сих пор. Я использую bootstrap по умолчанию и 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 -->