Bootstrap:将一个 div 与另外两个相邻 [英] Bootstrap: Place one div next to two others

查看：28
本文介绍了Bootstrap:将一个 div 与另外两个相邻的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我最近开始使用 Twitter 的 Bootstrap.

如何在 两个 其他 div(#1 和 #2)旁边放置一个 div(#3)，以便右侧的 div 与垂直的其他两个 div 一样高/大.

到目前为止我的代码:

 
<div class="form-group col-md-8"><label for="1">1</label><input type="text" id="1" class="form-control" placeholder="1">
<div class="form-group col-md-8"><label for="2">2</label><textarea id="2" class="form-control" rows="10"></textarea>

<div class="col-md-4"><img src="http://placehold.it/250x250&text=Map"/><input type="text" id="geo" class="form-control" placeholder="3">

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

解决方案

有一种更语义化的方式来做到这一点(仅在我发现这个问题寻找解决方案时才发布这个)

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

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

<div class="col-lg-12">

<div>

产生类似:

I recently started working with Twitter's Bootstrap.

How can I put a div (#3) next to two other divs (#1 and #2) so that the div on the right is as high/big as the other two divs vertically.

My code so far:

    <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>

I started a fiddle here: http://jsfiddle.net/2cbuL/6/

解决方案

Theres a more semantic way of doing this (only posting this as i found this question looking for a solution)

First you need to understand the basics of the grid system then the implementation is pretty simple, just set up two divs next to each other in a row, then but a row with two divs inside one of those divs. Example:

<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>

producing something like:

这篇关于Bootstrap:将一个 div 与另外两个相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆