带有div的Bootstrap Box

时间:2014-06-07 14:35:29

标签: html css twitter-bootstrap

enter image description here

我想像显示的图片那样划分网页区域。我尝试过这种方法。在某种程度上是对的。很高兴能够澄清我的怀疑。

<div class="row">
   <div class="col-md-8">
       <div class="well">
           <div class="row">
               <div class="col-md-12"><div class="well">canvas</div></div>
           </div>
           <div class="row">
               <div class="col-md-8"><div class="well">edit text</div></div>
               <div class="col-md-4"><div class="well">Button</div></div>
           </div>
       </div>
   </div>
   <div class="col-md-4"><div class="well" >Control panel</div></div>
</div>

2 个答案:

答案 0 :(得分:1)

试试这个..它会正常工作......

<div class="row">
<div class="col-md-8">
    <div class="well">

        <div class="row">
            <div class="col-md-12"><div class="well">canvas</div></div>
        </div>

        <div class="row">
                <div class="col-md-8"><div class="well">edit text</div></div>
                <div class="col-md-4"><div class="well">Button</div></div>
        </div>
    </div>   
</div>
<div class="col-md-4"><div class="well">Control panel</div></div></div>

答案 1 :(得分:1)

这是我在jsfiddle中尝试过的并且正在为我工​​作(没有好的课程)

<div class="container">
    <div class="row">
         <div class="col-xs-8">
             <div class="row">
                 <div class="col-xs-12">
                      Canvas
                 </div>
             </div>
             <div class="row">
                 <div class="col-xs-8">Edit Text</div>
                 <div class="col-xs-4">Button</div>
             </div>
         </div>
         <div class="col-xs-4">Control panel</div>
    </div>
</div>

http://jsfiddle.net/aJ9ne/