부트 스트랩 : 패널 바닥 글에서 왼쪽 및 오른쪽으로 당겨 바닥 글 나누기

부트 스트랩 : 패널 바닥 글에서 왼쪽 및 오른쪽으로 당겨 바닥 글 나누기

---

바닥 글에 두 개의 버튼이있는 부트 스트랩 패널이 있습니다.

    <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있으므로 각각 패널 바닥 글의 양쪽에 플로팅됩니다.

플로트는 작동하지만 버튼은 이제 바닥 글 밖에 있습니다.

풀 도우미 대신 그리드 시스템을 사용해 보았지만 동일한 결과를 얻었습니다.

나는 또한 해결책을 찾아 보았고 (이것은 내가 생각하는 꽤 일반적이어야 함) 사용자 정의 CSS로 부트 스트랩을 재정의 할 필요가없는 설명을 찾지 못했습니다.

부트 스트랩으로이 문제를 해결할 수 있습니까? 아니면 문제를 해결하기 위해 내 CSS를 넣어야합니까?

---

버튼 뒤에 clearfix로 div를 추가하십시오.

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

---

스탈린의 대답은 정확하지만 더 우아한 다른 접근 방식을 사용할 수 있습니다.

부트 스트랩 문서 ( #clearfix )에서

부모 요소에 .clearfix를 추가하여 부동 소수점을 쉽게 지 웁니다.

부모 div에 clearfix를 추가하기 만하면됩니다.

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

---

text-rightpanel-footer div에 클래스 를 추가하십시오.

---

.panel-footer가 이미 .panel-body 및 .modal-footer와 같은 방식으로 clearfix CSS 라이브러리에 포함되어 있지 않다는 것이 이상하다고 생각합니다. 바닥 글에 clearfix 클래스를 던지는 것을 기억하는 대신 (많은 경우 고통 스러울 수 있음) 마스터 CSS의 .panel-footer에 clearfix CSS를 추가하거나 라이브러리를 직접 편집하는 것이 좋습니다.

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

참고 URL : https://stackoverflow.com/questions/23872755/bootstrap-pull-left-and-right-in-panel-footer-breaks-footer