Question

我正在尝试创建以下Bootsrap设计：

我有2个部分，col-lg-8和col-lg-4。一侧有3个文本框（col-lg-8），另一侧有3个选择控件和一个文本框（col-lg-4）。 div-col-lg-8和col-lg-4的高度应该相同。

我们怎样才能做到这一点？任何帮助表示赞赏。

HTML

<div class="row">
    <div class="col-lg-8">
        <form role="form">
            <div class="form-group">
                <input class="form-control    ">
            </div>
            <div class="form-group">
                <input class="form-control" >
            </div>
            <div class="form-group">
                <input class="form-control" >
            </div>
        </form>
    </div>
    <!-- /.col-lg-6 (nested) -->
    <div class="col-lg-4">
        <form role="form">
            <div class="row">
                <div class="form-group">
                    <select class="form-control" >
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" >
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control"  >
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
                <div class="form-group">
                    <input class="form-control-sm">
                </div>
            </div>
        </form>
    </div>
    <!-- /.col-lg-6 (nested) -->
</div>

Answer 1

有一个名为＆＃34; row-eq-height＆＃34;的引导类。如果我们在行中使用此类，那么其中的列将具有相同的高度。

在您的代码中，您必须在最外面的行中使用类row-eq-height。您修改后的代码是：

<div class="row row-eq-height">
<div class="col-lg-8">
    <form role="form">
        <div class="form-group">

            <input class="form-control    ">

        </div>
        <div class="form-group">

            <input class="form-control" >
        </div>
        <div class="form-group">
            <input class="form-control" >
        </div>

    </form>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-4">

    <form role="form">

      <div class="row">
                 <div class="form-group">

            <select class="form-control" >
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
                 <div class="form-group">

            <select class="form-control" >
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
                 <div class="form-group">

            <select class="form-control"  >
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
                 <div class="form-group">
      <input class="form-control-sm">
        </div>

        </div>
    </form>

</div>
<!-- /.col-lg-6 (nested) -->

行内列的高度相等

1 个答案: