Question

In the code below the span #2 appears below span #1, despite the fact that the number of columns is the same as in the parent span (10). This is because of the border on the nested row (class="row well").

Is there an elegant way to apply border to the nested row without pushing the contents down.

I suppose applying top/left/bottom/right borders on the nested spans depending on their location and applying box-sizing: border-box would help, but then there will be problems when reducing the width of the browser and also this would be an ugly solution.

<div class="row">
  <div class="span2"> left menu </div>
  <div class="span10">
    <div class="row well">
      <div class="span5" style="background-color: #aca">
        #1
      </div>
      <div class="span5" style="background-color: #aac">
        #2
      </div>
    </div>
  </div>
</div>

Answer 1

dont put the well on the row, make it its own container..

<div class="row">
  <div class="span2"> left menu </div>
  <div class="span10">     
    <div class="well">
      <div class="row-fluid">
        <div class="span6" style="background-color: #aca">
          #1
        </div>
        <div class="span6" style="background-color: #aac">
          #2
        </div>
      </div>
    </div>
  </div>
</div>

I replaced the class=”row” with class=”row-fluid” because the “row” class uses strict widths, while the “row-fluid” class uses percentages and will keep the “span6” classes side by side even though there’s extra padding and borders added to its parent.