twitter-bootstrap - Bootstrap : Place one div next to two others

Question

我最近开始使用 Twitter 的 Bootstrap。

如何在 旁边放置一个 div (#3)两个 其他 div(#1 和 #2)，以便右侧的 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>

我在这里开始了一个 fiddle : 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>

产生类似的东西: