Html 引导-如何生成这个？

我一直在努力复制这一点，但似乎没有得到它的窍门，因为我是新的引导

以下是我试图复制的图像：

我已经有了头球，这还不算太糟糕。但是，在一个大小合适、没有相对宽度的框中输入复选标记，在框的周围加上边框，然后在那一行中输入其他内容，这让我非常恼火：（我甚至不能正确输入复选标记，更不用说其他内容了

即使在有边框（没有填充）的阴影框中居中一个字形图标，现在对我来说也很难

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

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

合同经核实准确无误，自2015年1月1日起未发生变更。
核实日期：2015-11-06

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

---

希望有人能引导我正确的方向。我感到慌乱，我知道这不会那么困难。

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

添加边框、框阴影和线条高度0，以消除底部多余的空白

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

这是一个工作演示

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

合同经核实准确无误，自2015年1月1日起未发生变更。
核实日期：2015-11-06

---

这样看起来更好，但仍然无法在该该死的复选框周围获得边框和背景：（更新了画笔，我为你添加了一个边框和框阴影作为示例，你可以随意定制它。太棒了。真不敢相信我没有想到将图像嵌套在我的less文件中！我用div做了一个错误的选择。现在-除了图像前面的小空间之外，一切看起来都很好。为什么会发生这种情况n我把它去掉了？我猜，因为它是基于相对大小的-它必须把浮动空间放在某个地方，对吗？我看不到图像，因为它不在网上，但本质上是有的。