Загрузочный лоток: потяните влево и вправо в нижнем колонтитуле панели

У меня есть панель Bootstrap с двумя кнопками в нижнем колонтитуле:

    <div class="panel-footer">
        {{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }}
            {{ Form::submit("Edit", array('class' => 'btn btn-default')) }}
        {{ Form::close() }}
        {{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }}
            {{ Form::submit("Delete", array('class' => 'btn btn-default')) }}
        {{ Form::close() }}
    </div>

Формы для каждой из кнопок имеют класс pull-left и pull-right, так что каждый из них будет перемещаться по обе стороны от нижнего колонтитула панели.

Поплавок работает, но теперь кнопки находятся за пределами нижнего колонтитула:

enter image description here

Я попробовал использовать сетку вместо помощников потянуть, но я получил тот же результат.

Я также искал решение (это должно быть довольно распространено, я думаю) и не нашел объяснений, которые не требуют переопределения Bootstrap с пользовательским css.

Можно ли исправить это с помощью только Bootstrap или мне нужно будет сбросить свой собственный CSS, чтобы исправить его?

Ответы

Ответ 1

Просто добавьте div с clearfix после кнопок

<div class="clearfix"></div>

Ответ 2

сталинский ответ правильный, но вы можете использовать другой подход, более элегантный

Из документа Bootstrap (#clearfix)

Легко очистить поплавки, добавив .clearfix в родительский элемент.

Просто добавьте clearfix в родительский div:

<div class="panel-footer clearfix">
    {{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }}
        {{ Form::submit("Edit", array('class' => 'btn btn-default')) }}
    {{ Form::close() }}
    {{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }}
        {{ Form::submit("Delete", array('class' => 'btn btn-default')) }}
    {{ Form::close() }}
</div>

Ответ 3

просто добавьте класс text-right в div-панели

Ответ 4

Мне кажется, что странно, что .panel-footer не включен в библиотеку clearfix css уже так, как это делают .panel-body и даже .modal-footer. Вместо того, чтобы помнить о том, чтобы бросать класс clearfix на любой нижний колонтитул (если у вас есть много, это может быть болью), лучше просто добавить clearfix css в .panel-footer в ваш основной CSS или отредактировать библиотеку напрямую.

.panel-footer:before, .panel-footer:after {
    display: table;
    content: " ";
}
.panel-footer:after {
    clear: both;
}