如何在Bootstrap 3中并排放置字段

Question

I'm developing the following UI. as pictured below.

I've done the header part but I'm stuck at the container part unable to decide the best way to develop it. My thought is to use the following markup to get the look and feel of the UI elements.

<div class="box">
<div class="box-header">
    <h4>Account Summery</h4>
</div>
<div class="box-content">
    <div class="row">
        <div class="col-md-2">
        </div>
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-6">
                    <span>field name:</span>
                </div>
                <div class="col-md-6">
                    <p>field value</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <span>field name:</span>
                </div>
                <div class="col-md-6">
                    <p>field value</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <span>field name:</span>
                </div>
                <div class="col-md-6">
                    <p>field value</p>
                </div>
            </div>
        </div>
        <div class="col-md-2">
        </div>
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-6">
                    <span>field name:</span>
                </div>
                <div class="col-md-6">
                    <p>field value</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <span>field name:</span>
                </div>
                <div class="col-md-6">
                    <p>field value</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <span>field name:</span>
                </div>
                <div class="col-md-6">
                    <p>field value</p>
                </div>
            </div>
        </div>
        <div class="col-md-2">
        </div>
    </div>
    <div class="clearfix"></div>
</div>

I feel like there would be a much easier way to achieve this sort of a look and feel. Please let me know if anything that I'm doing wrong.

Answer 1

set an offset like

<div class="col-md-offset-2 col-md-3">
</div>

instead of

<div class="col-md-2">
</div>
<div class="col-md-3">
    <div class="row">
     ...
    </div>
</div>

here is structure for fields

<div class="row">
   <div class="col-md-6">
       <span class="left">field name:</span>

       <span class="right">field value</span>
   </div>
</div>

and here is full snippet of code

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="box"> <div class="box-header"> <h4>Account Summery</h4> </div> <div class="box-content"> <div class="row"> <div class="col-md-offset-2 col-md-3"> <div class="row"> <div class="col-md-12"> <span class="left"><strong>field name:</strong></span> <span class="right">field value</span> </div> </div> <div class="row"> <div class="col-md-12"> <span class="left"><strong>field name:</strong></span> <span class="right">field value</span> </div> </div> <div class="row"> <div class="col-md-12"> <span class="left"><strong>field name:</strong></span> <span class="right">field value</span> </div> </div> </div> <div class="col-md-offset-2 col-md-3"> <div class="row"> <div class="col-md-12"> <span class="left"><strong>field name:</strong></span> <span class="right">field value</span> </div> </div> <div class="row"> <div class="col-md-12"> <span class="left"><strong>field name:</strong></span> <span class="right">field value</span> </div> </div> <div class="row"> <div class="col-md-12"> <span class="left"><strong>field name:</strong></span> <span class="right">field value</span> </div> </div> </div> </div> <div class="clearfix"></div> </div> 

Answer 2

It would be better if you do it like following.

<div class="box">
    <div class="box-header">
        <h4>Account Summery</h4>
    </div>
    <div class="box-content">
        <div class="row">
            <div class="col-md-3 col-md-push-2">
                <div class="col-md-6">
                    <span>field name:</span>
                </div>
                <div class="col-md-6">
                    <span>field value</span>
                </div>
                <div class="col-md-6">
                    <span>field name:</span>
                </div>
                <div class="col-md-6">
                    <span>field value</span>
                </div>
            </div>

            <div class="col-md-3 col-md-push-2">
                <div class="col-md-6">
                    <span>field name:</span>
                </div>
                <div class="col-md-6">
                    <span>field value</span>
                </div>
                <div class="col-md-6">
                    <span>field name:</span>
                </div>
                <div class="col-md-6">
                    <span>field value</span>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

I would take a look into the Inline Rows section of the Bootstrap docs.

Created a CodePen for you: http://codepen.io/afang/pen/xZxNwN

<div class="container">
  <div class="header">
    <h1>Summary</h1></div>
  <table class="table">
    <caption>Use inline rows.</caption>
    <tbody>
      <tr>
        <th scope="row">Account Name: </th>
        <td>my_acc </td>
        <td style="font-weight: bold">Last Payment: </td>
        <td>100USD</td>
      </tr>
      <tr>
        <th scope="row">Account Balance: </th>
        <td>$10</td>
        <td style="font-weight: bold">Last Payment Date: </td>
        <td>11/25/2434</td>
      </tr>
      <tr>
        <th scope="row">Last Invoice: </th>
        <td>Larry</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 4

There can be many ways to do this.

<div class="row">
<div class="col-md-6">
<div class="col-md-6 heading">head1</div>
<div class="col-md-6 details">detail1</div>
<div class="col-md-6 heading">head 3</div>
<div class="col-md-6 details">detail3</div>
<div class="col-md-6 heading">head5</div>
<div class="col-md-6 details">details5</div>
</div> 
<div class="col-md-6">
<div class="col-md-6 heading">head2</div>
<div class="col-md-6 details">detail2</div>
<div class="col-md-6 heading">head4</div>
<div class="col-md-6 details">detail 4</div>
</div>
</div>

CSS Class heading is just for making bold and right alignmen details for normal text and left alignment

Answer 5

below will be my structure. span with float left for title and right for value

<div class="row">
<div class="col-md-6">
    <p class="clearfix"> 
        <span class="left">field title: </span>
        <span class="right">field value</span> 
    </p>
</div>