在bootstrap中删除第一列之前的额外空格

Question

在第一列之前，还有很大的空间，就像我使用的pull-1一样。在第一行之前，我有一个导航栏，它的边距-底部: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

我想你说的是容器创造的空间-流体。

带容器的-fluid

​

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

​

不带容器的-fluid

​

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

​

希望这能有所帮助！