ボタン間のスペース（パディング）を均等にする方法

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：.COL-1と

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

しかしで培地ブレークポイントを私はあなたのボタンが予定されている疑いがありますユーザーが小さい画面でこれを見るといくぶん消えます。 6つのメニュー項目があるので、あなたのボタンを.col-md-2に変更して、6つのボタンが等しく12を分けるようにします。ボタンを空間に均等に配置するためには、ボタンに余分なクラスを追加する必要があります。「btn-block。ブートストラップには、適切な間隔とパディングを持つ独自のボタンクラスも付属しています。

乾杯！