Bootstrap - 如何生成？

Question

我一直在努力尝试重现这一点，但似乎没有得到它的窍门，因为我是bootstrap的新手。

这里是我试图复制图像：

我已经有了头 - 这是不是太糟糕。但是在非相对宽度的很大尺寸的框中获取复选标记，并在其周围放置边框，并获取该行中的其他内容对我来说非常令人发狂（我甚至无法看清其中的复选标记。其余少

即使中心在阴影框中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将所有东西都推到了下一行。请记住，引导程序框架适用于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> 

CODEPEN DEMO