css - 如何摆脱使用 bootstrap 创建的进度条中的间隙

Question

我使用来自 Bootstrap 网站的示例代码创建了一个进度条。我在进度条的开头出现了差距，我无法将其删除。我附上了图片以显示它的外观。

这是代码，

    <div class = "form-group">
        <div class = "col-xs-12">
            <h4>In Progress</h4>
        </div>
        <div class="progress progress-striped active col-xs-12">
          <div class="progress-bar col-xs-12"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%; margin-left: 0; margin-right: 0; padding: 0px 0px 0px 0px">
            <span class="sr-only">45% Complete</span>
          </div>
        </div>
        <div class = "col-xs-12">
            <button class = "btn btn-danger col-xs-6 pull-right">Stop</button>
        </div>
    </div>

Answer 1

使用 col-xs-12 将进度条放在 div 中，不要将 col-xs-12 直接应用于进度条，否则它将受制于列的样式(例如填充):

Demo Fiddle

<div class="form-group">
    <div class="col-xs-12">
         <h4>In Progress</h4>    
    </div>
    <div class="col-xs-12"> <!-- wrap within a column -->
        <div class="progress progress-striped active">
            <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> 
                <span class="sr-only">45% Complete</span>    
            </div>
        </div>
    </div>
    <div class="col-xs-12">
        <button class="btn btn-danger col-xs-6 pull-right">Stop</button>
    </div>
</div>