html - Bootstrap 中的标题和值(value)？

Question

我需要实现这个布局:(*我的问题是关于红色包围的部分*)。

我已经将其实现为:

整体标记(简化):

<div class=" row">
    <div>Your Personal Information</div>
    <div class="row">
      <div class=".col-lg-4 ">
          ...left side...
       </div>
       <div class=".col-lg-8">
          ...right side...
       </div>
    </div>
 </div>

Here is what I've tried :

2 个问题:

1)左 Pane 行的正确方法是什么(使用 bootstrap 3)？ 每行都必须包含 .row 吗？另外，什么是正确的显示方式:header:value？

2) 为什么 bla bla 行 - 不在右侧？我确实使用了 .col-lg-4 和 .col-lg-8 作为我应该使用的文档状态。

编辑

我刚刚注意到这些类与 . 一起，删除了那些点，并改用了 col-xs-4/8 ，现在它可以正常工作了。但仍然 - 什么是正确的写作方式:(我应该使用哪些类)

"header1":"value1"
"header2":"value2"

更新了 jsbin:http://jsbin.com/tovajifi/6/edit

Answer 1

这完全取决于使用的类和浏览器窗口的宽度:

<div class="col-lg-4 col-md-4 col-xs-4">
    Left column here
</div>
<div class="col-lg-8 col-md-8 col-xs-8">
    Right Columnt here
</div>

基本上，如果您在小屏幕(比方说手机)上使用 col-lg-8 类，它将无法工作，因为该类仅适用于大屏幕。

关于"header":"value" 问题，最简单的方法是:

<p>Country of Origin: <strong>Israel</strong><p>

这是整个片段:http://jsbin.com/tovajifi/7/

更多信息可以在这里找到:http://getbootstrap.com/css/#type