时间戳

首页 > 解决方案 > 超出列宽的元素

twitter-bootstrap - 超出列宽的元素

问题描述

我是引导程序的新手，我试图创建一个表单并在它旁边放一个后退按钮。现在我面临的问题是父列col-lg-4 col-lg-offset-4只是提到的列中的嵌套列超过了它的限制并且正在移出col-lg-4 col-lg-offset-4. 我试图弄清楚，但找不到合乎逻辑的解释。我还发布了我面临的问题的代码和图像。

@section('body')
<div class="container">
    <div class="row">
        <br>
        <div class="col-lg-4 col-lg-offset-4">
            
            <div class="col-lg-offset-3 col-lg-11">
                <div class="col-lg-9"><h3>Edit Record</h3></div>
                
                <div class="col-lg-1 pull-right">
                    <button class="btn btn-info">Back</button>
                </div>
            </div>
            
            <div class="col-lg-12">
                 <form class="well">
                    <input type="text" name="title" class="form-control" value="{{$rec->title}}"><br>
                    <input type="text" name="title" class="form-control" value="{{$rec->body}}"><br>

                    <div class="col-lg-offset-5">
                        <button class="btn btn-info">Submit</button>
                    </div>

                 </form>
            </div>
        </div>
            
        </div>
            
    </div>

@endsection

col-lg-4 col-lg-offset-4 col-lg-4 col-lg-offset-4

这就是它超出限制的方式

col-lg-4 col-lg-offset-4

请有人解释这是如何以及为什么会发生的？

标签： twitter-bootstrap

解决方案

您不能将列直接嵌套在其他列下，您必须使用嵌套行，并且列必须是行下的唯一元素，因此：

<div class="row">
    <br>
    <div class="col-lg-4 col-lg-offset-4">

        <div class="col-lg-offset-3 col-lg-11">
            [...]
        </div>
    </div>
</div>

需要变成这样：

<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="row">
            <div class="col-lg-offset-3 col-lg-11">
            [...]
            </div>
        </div>
    </div>
</div>

另外，请记住，当您创建一个新的嵌套行/列时，它仍将分为十二部分，但大小将是容器元素的大小。在你的情况下，这<div class="col-lg-offset-3 col-lg-11">将是 11/12<div class="col-lg-4 col-lg-offset-4">所以你必须调整，因为 11+3 = 14

例子：

不确定这是否与您希望的外观完全一致，但它是一个有效的起点......随意编辑它，但您需要：

<div class="container">
    <div class="row">
        <!-- size this "col" however you want it -->
        <div class="col">
            <div class="row">
                <div class="col-lg-offset-3 col-lg-8">
                    <h3>Edit Record</h3>
                </div>
                <div class="col-lg-1">
                    <button class="btn btn-info">Back</button>
                </div>
            </div>

            <form class="well">
                <div class="row">
                    <div class="col-lg-offset-3 col-lg-9">
                        <!-- you may want to put these two inputs in their own rows/columns too -->
                        <input type="text" name="title" class="form-control" value="{{$rec->title}}"><br>
                        <input type="text" name="title" class="form-control" value="{{$rec->body}}"><br>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-offset-3 col">
                        <button class="btn btn-info">Submit</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

推荐阅读