如何摆脱使用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

将您的进度条放在div col-xs-12内，不要直接将col-xs-12应用于进度条，否则将受制于列的样式（例如填充）：< / p>

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>