如何讓按鈕之間的空間（填充）等於

Question

我正在使用引導程序將每個按鈕放在一個col-md-1中以在它們之間留出一些空間，但是我沒有在按鈕之間獲得均勻空間，是否還有其他空間簡單的方法來做到這一點。這是我的代碼：

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

和我的CSS代碼是：

/* Dropdown Button */ 
.dropbtn { 
background-color: #4CAF50; 
color: white; 
text-align:center; 
padding-top: 10px; 
padding-bottom:10px; 
padding-left:20px; 
padding-right:20px; 
font-size: 16px; 
border: #00ffff; 
border-style: solid; 
border-width: 2px; 
cursor: pointer; 
} 

/* Dropdown button on hover & focus */ 
.dropbtn:hover, .dropbtn:focus { 
background-color: Transparent; /* Transparent here */ 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
position: relative; 
display: inline-block; 
} 




/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
display: none; 
position: absolute; 
background-color: Transparent; 
background-color: Transparent; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropbtn{ 
background-color: Transparent; 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 

color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu (use JS to add this class to the .dropdown-content            
.show {display:block;}` 


[Please view Image for more info][1] 

Answer 1

我注意到的第一件事是，你缺少.container流體和容器.row。請記住，與白手起家，你必須巢您所有的.COL-1內部.container流體和.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個。現在，讓按鈕空間均勻地添加一個額外的類到你的按鈕 - 「btn-block。Bootstraps也帶有它自己的按鈕類，它們具有適當的間距和填充。bootstraps網站在它的網格系統上有非常好的文檔。

乾杯！