Элемент, превышающий ширину столбца

Question

Я новичок в начальной загрузке, и я попытался создать форму и поставить кнопку назад рядом с ней. Теперь проблема, с которой я сталкиваюсь, состоит в том, что родительский столбец имеет значение 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"> будет 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>