Question

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

这是超出限制的方式

请有人解释这种情况的发生方式和原因？

Answer 1

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

<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">将是<div class="col-lg-4 col-lg-offset-4">的11/12，因此您必须进行调整，因为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>

元素超出列宽

1 个答案: