Question

我有以下引导代码段。我正在学习如何引导中的列/网格。如何将所有菜单名称都放入一行。目前，鸡尾酒和酒吧菜单转到下一行，因为当我希望它们都彼此相邻时，它已超过4个项目？

以下内容有什么区别？

col-md-3
col-sm-5
col-xs-12

当前，它在同一行中放置4个项目，然后在下一行中放置下一个项目。我要确保它们彼此平行并排。没有多行。调整窗口大小（即在移动设备上显示）时，该值必须相同。

总共应该有6列和1行。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <section id="mu-counter">
    <div class="mu-counter-overlay">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="mu-counter-area">

              <ul class="mu-counter-nav">

                <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>À La Carte Menu</span>
                
                  </div>
                </li>

                <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>Vegan Menu</span>
            
             
                  </div>
                </li>

                 <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>Kids Menu</span>
         
                  </div>
                </li>

                 <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>Lunch Menu</span>
              
                  </div>
                </li>

          
                 <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>Cocktails</span>
              
                  </div>
                </li>

          
                 <li class="col-md-3 col-sm-5 col-xs-12">
                  <div class="mu-single-counter">
                    <span>Bar Menu</span>
              
                  </div>
                </li>
              </ul>

            </div>
          </div>
        </div>
      </div>
 </div>
  </section>
</div>

</body>
</html>

全屏查看此代码段以查看问题

Answer 1

要在正常屏幕上将6个项目放在一行中，您应该使用col-md-2类。

在引导程序中，最大宽度为12，则应将其除以6以在一行中获得6列。

md表示中等屏幕， xs表示屏幕非常小，依此类推。

您可以在文档中阅读更多内容。

Bootstrap项适合一行6列-如何调整代码

1 个答案: