Bootstrap span inside a span - css

Question

I have some difficulties to understand how put span inside span with bootstrap.
I want to have one block centered, with inside :
-One row with inside :
-One block at left (span6)
-One block at right (span6)
-One row with inside :
-One button centered (span 6 offset3)
You could see the problem here :
http://jsfiddle.net/UBTv4/18/
<div class='row'>
<div class='span6 offset3'>
<div class='well'>
<h2>Title</h2>
<div class='row'>
<div class='span6'>
<p class="lead">Bloc left : </p>
</div>
<div class='span6'>
<p class="lead">Bloc right : </p>
</div>
</div>
<div class='row'>
<div class='span6 offset3'>
<input id="play" type="submit" value="play" class="btn btn-primary"/>
</div>
</div>
</div>
</div>
What is the problem ?
I want something like that :

Answer 1

Here is your solution.
<div class='row'>
<div class='span6 offset3 well' > <!-- .well class here instead of inner div -->
<h2>Title</h2>
<div class='row'>
<div class='span3'> <!-- instead of span6 -->
<p class="lead">Bloc left : </p>
</div>
<div class='span3'> <!-- instead of span6 -->
<p class="lead">Bloc right : </p>
</div>
</div>
<div class='row'>
<div class='span3 offset3'> <!-- instead of span6 -->
<input id="play" type="submit" value="play" class="btn btn-primary"/>
</div>
</div>
</div>
</div>
http://jsfiddle.net/UBTv4/23/
As explanation I'll suggest you to carefully read Nesting column section from this link:
http://getbootstrap.com/2.3.2/scaffolding.html
In short description, if you nest row in a span6, the sum of inner row spans should be 6 also (3+3).
Also .well class has some paddings/marings, so you can't you it "between" parent and nested rows/spans.

Answer 2

I think you want to use .row-fluid instead. This will get your 2 .span6 is one row.
Here is the updated fiddle: http://jsfiddle.net/skelly/UBTv4/22/

Answer 3

You could also use pull-right and pull-left to make the respective blocks move left and right.
</div>
<div class='span6'>
<p class="lead pull-right">Bloc right : </p>
</div>
</div>
<div class='row'>
<div class='span6 offset3'>
<input id="play" type="submit" value="play" class="btn btn-primary"/>
</div>
</div>
</div>
</div>
You can see the code here:http://jsfiddle.net/UBTv4/18/