Bootstrap：将一个div放在另外两个div旁边

Question

我最近开始使用Twitter的Bootstrap。

如何在两个其他div（＃1和＃2）旁边放置div（＃3），以便右边的div与其他两个div垂直一样高/大

到目前为止我的代码：

    <div class="row">
    <div class="form-group col-md-8">
        <label for="1">1</label>
        <input type="text" id="1" class="form-control" placeholder="1">
    </div>
    <div class="form-group col-md-8">
        <label for="2">2</label>
        <textarea id="2" class="form-control" rows="10"></textarea>
    </div>
    <div class="col-md-4">
        <img src="http://placehold.it/250x250&text=Map" />
        <input type="text" id="geo" class="form-control" placeholder="3">
    </div>
</div>

我在这里开始了一个小提琴：http://jsfiddle.net/2cbuL/6/

Answer 1

这是一种更加语义化的方式（仅发布此内容，因为我发现这个问题正在寻找解决方案）

首先你需要了解网格系统的基础知识，然后实现非常简单，只需在一行中彼此相邻设置两个div，然后在其中一个div中设置两个div。例如：

<div class="container">
    <div class="row">
        <div class="col-lg-6">
        </div>
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-12">
                </div>
                <div class="col-lg-12">
                </div>
            </div>
        </div>
    </div>
<div>

产生类似的东西：

Answer 2

我嵌套了两个堆叠的div，它们左对齐了class =＆＃34; pull-left＆＃34;更新了Fiddle Here

<div class="row">           <div  class="pull-left">
                        <div class="form-group col-md-8 " >
                            <label for="title">Title</label>        
                            <input type="text" id="title" class="form-control" placeholder="Title">
                        </div>

                        <div class="form-group col-md-8">
                            <label for="description">Description</label>
                            <textarea id="description"class="form-control" rows="10"></textarea>
                        </div>
</div>



                        <div class="col-md-4">
                            <img src="http://placehold.it/250x250&text=Map" />
                            <input type="text" id="geo" class="form-control" placeholder="Type in Adress (Google API)">
                        </div>

                    </div>