Question

我正在使用bootstrap将每个按钮放在col-md-1中以在它们之间留出一些空间，但是我没有获得按钮之间的空间，是否还有更简单的方法。这是我的代码：

foo

我的css代码是：

   <div class = "header">
   <div class="container">
   <div class="row">
   <!-- Start Menu -->
   <!-- HOME -->
   <div class="col-md-1">
               <div class="menu">
                  <a href="#"><button class = "dropbtn">Home</button></a>             
              </div>
   </div>
   <!-- MENU -->
   <div class="col-md-1">
               <div class="dropdown">
                  <button onclick="myFunction()" class="dropbtn">Menu</button>
                  <div id="myDropdown" class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                  </div>
              </div>
   </div>

  <!-- CATERING -->         
     <div class="col-md-1">
       <div class="menu">
          <a href="#"><button class = "dropbtn">Catering</button></a>             
       </div>
     </div>

  <!-- Place Order -->         
     <div class="col-md-1">
       <div class="menu">
          <a href="#"><button class = "dropbtn">Order</button></a>             
       </div>
     </div>

     <!-- Gallery -->         
     <div class="col-md-1">
       <div class="menu">
          <a href="#"><button class = "dropbtn">Gallery</button></a>             
       </div>
     </div>

      <!-- Contact -->         
     <div class="col-md-1">
       <div class="menu">
          <a href="#"><button class = "dropbtn">Contact</button></a>             
       </div>
     </div>
   <!-- End Menu -->
   </div>
   </div>

Answer 1

我注意到的第一件事是你缺少.container-fluid和.row容器。请记住，使用Bootstraps，您必须将所有.col-1嵌套在.container-fluid和.row类中，如下所示：

<div class="container" style="border:1px solid #000">
    <div class="row">
        <!-- Start Menu -->
        <!-- HOME -->
        <div class="col-md-2">
            <div class="menu">
                <a href="#"><button class="dropbtn btn-block">home</button></a>
            </div>
        </div>
        <!-- MENU -->
        <div class="col-md-2">

            <button onclick="myFunction()" class="dropbtn btn-block">Menu</button>
            <div id="myDropdown" class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>

        </div>
        <!-- CATERING -->
        <div class="col-md-2">
            <div class="menu">
                <a href="#"><button class="dropbtn btn-block">Catering</button></a>
            </div>
        </div>
        <!-- Place Order -->
        <div class="col-md-2">
            <div class="menu">
                <a href="#"><button class="dropbtn btn-block">Order</button></a>
            </div>
        </div>
        <!-- Gallery -->
        <div class="col-md-2">
            <div class="menu">
                <a href="#"><button class="dropbtn btn-block">Gallery</button></a>
            </div>
        </div>
        <!-- Contact -->
        <div class="col-md-2">
            <div class="menu">
                <a href="#"><button class="dropbtn btn-block">Contact</button></a>
            </div>
        </div>
        <!-- End Menu -->
    </div>
</div>

但是在.col-1的中等断点处，我怀疑当用户在较小的屏幕上观看时，你的按钮会有所消失。有6个菜单项，所以我将你的按钮改为.col-md-2，所以6个按钮平均分为12个。现在让按钮空间均匀地为你的按钮添加一个额外的类 - ＆＃34; btn-block。 Bootstraps也有自己的按钮类，具有适当的间距和填充。 bootstraps网站在其网格系统上有非常好的文档。

干杯！

如何使按钮之间的空间（填充）相等

1 个答案: