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

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

演示小提琴

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