Bootstrap - 如何生成？

Question

我一直在尝试并尝试重现这一点，但似乎并没有因为我不熟悉它而不知所措。

这是我想要复制的图片：

我已经有了标题 - 这太糟糕了。但是在一个大小合适的盒子中取得勾选标记并不是相对宽度，在它周围放一个边框，然后在那行中获取其他内容让我感到很生气:(我甚至无法获得勾选标记在那里，其余的更少。

即使将带有边框（没有填充）的阴影框中的一个glyphicon居中，我现在也很难。

我的代码可能很糟糕，但到目前为止：

    <div class="container">
    <div class="row table-bordered">
        <div class="col-md-12">
            <div class="MyCheckBox"><img src="images/checkbox.png" /></div>
            <span class="ContractBrand">Contract</span> is verified accurate and hasn't changed since 2015-01-01.
        </div>
        <div class="col-md-2">
            VERIFIED 2015-11-06
        </div>
    </div>
</div>

我的CSS主要是背景颜色，边框颜色，文字大小，文字颜色。没什么特别的。

希望有人可以指引我。我感到慌乱，我知道它可能会那么困难。

Answer 1

你只需要重新安排一些事情，一个问题是你已经占用了12列，所以bootstrap将所有内容推到了下一行。请记住，bootstrap框架适用于12列网格系统。

添加边框，框阴影和线高0以消除底部的额外空白。

OPTIONS http://...../api/avoidsegments/123456 401 (Unauthorized)

(index):1 XMLHttpRequest cannot load http://...../api/avoidsegments/123456. 
Response for preflight has invalid HTTP status code 401

这是一个有效的演示

img{
  border: 1px solid #000;
  box-shadow: 0 0 5px #000;
  line-height: 0;
}

CODEPEN DEMO