在引導第一步之前刪除額外的空間

Question

在第一個col之前，剩下很大的空間，就像我用過pull-1一樣。在第一行之前，我的導航欄有margin-bottom：0;

這裏是我的代碼

<div class="container-fluid"> 

      <div class="row" gpon-pic-area> 
             <div class="col-md-2" style="background-color: red"> 
              Inspection 
                  <br> 
                  <div class="rail-select gpon-pic-area"> 
                 <div class="select-side"> 
                  <i class="fa fa-angle-down"></i> 
                 </div> 
                 <select class="form-control gpon-pic-area" > 
                          <option value="portStatus">Port Status</option> 
                    <option value="portAlarm">Port Alarm</option> 
                    <option value="portUsage">Port Usage</option> 
                    <option value="portBandwidth">Port Bandwidth</option> 
                         </select> 
                    </div> 
             </div> 
</div> 
</div> 

Answer 1

我認爲你是在談論由容器流體創造的空間。

使用容器流體

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container-fluid"> 
 

 
    <div class="row" gpon-pic-area> 
 
    <div class="col-md-2" style="background-color: red"> 
 
     Inspection 
 
     <br> 
 
     <div class="rail-select gpon-pic-area"> 
 
     <div class="select-side"> 
 
      <i class="fa fa-angle-down"></i> 
 
     </div> 
 
     <select class="form-control gpon-pic-area"> 
 
                          <option value="portStatus">Port Status</option> 
 
                    <option value="portAlarm">Port Alarm</option> 
 
                    <option value="portUsage">Port Usage</option> 
 
                    <option value="portBandwidth">Port Bandwidth</option> 
 
                         </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

沒有容器流體

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
    <div class="row" gpon-pic-area> 
 
    <div class="col-md-2" style="background-color: red"> 
 
     Inspection 
 
     <br> 
 
     <div class="rail-select gpon-pic-area"> 
 
     <div class="select-side"> 
 
      <i class="fa fa-angle-down"></i> 
 
     </div> 
 
     <select class="form-control gpon-pic-area"> 
 
                          <option value="portStatus">Port Status</option> 
 
                    <option value="portAlarm">Port Alarm</option> 
 
                    <option value="portUsage">Port Usage</option> 
 
                    <option value="portBandwidth">Port Bandwidth</option> 
 
                         </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

希望這有助於！