在网格元素内部组合一个按钮和一个进度条

Question

我正在学习Bootstrap。我有一个简单的网格视图，分为两个如下：

<div class="row">
    <div class="col-md-6">cell 1</div>
    <div class="col-md-6">cell 2</div>
</div>

我想将一个按钮和一个进度条放入单元格2，同时保持它们内联。我从以下开始：

<div class="row">
    <div class="col-md-6">cell 1</div>
    <div class="col-md-6">
        <button type="button" class="btn btn-primary">Primary</button>
        <div class="progress">
            <div class="progress-bar progress-bar-striped active" 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>

显示按钮和进度条，但是包裹而不是内联

我希望得到（在一个小Photoshop的帮助下）到这个

我不确定如何进步，你能帮忙吗？ 非常感谢。

Answer 1

您可以使用此解决方案：

http://jsfiddle.net/nxxw0obk/1/

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">cell 1</div>
        <div class="col-xs-6">
            <button type="button" class="btn btn-primary">Primary</button>
            <div class="progress progressbar-container">
                <div class="progress-bar progress-bar-striped active" 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>

.progressbar-container{
  display: inline-block;
  width: 100px;
  margin: 0;
  position: relative;
  top: 5px;
}

（P.S。我使用了xs-类，因为我有一个小屏幕）

Answer 2

如果您为按钮和进度条添加了另一个宽度限制，则应该使用它。

<div class="row">
    <div class="col-md-6">cell 1</div>
    <div class="col-md-6">
        <div class="col-xs-2">
            <button type="button" class="btn btn-primary">Primary</button>
        </div>
        <div class="col-xs-10">
            <div class="progress">
                <div class="progress-bar progress-bar-striped active" 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>
</div>