Bootstrap 3을 사용하고 있으며 오른쪽 상단의 패널 헤더에 몇 가지 버튼을 추가하고 싶습니다. 추가하려고 할 때 제목 기준선 아래에 표시됩니다.
제목, 패널 제목 또는 버튼에 추가해야하는 누락 된 CSS는 무엇입니까?
답변
with 클래스에 clearfix클래스를 추가하여 시작합니다 . 그런 다음 모두 추가 하고 받는 태그입니다. 그런 다음 필요에 따라을 추가 합니다.<div>panel-headingpanel-titlepull-leftH4padding-top
다음은 전체 코드입니다.
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
</div>
...
</div>답변
여기 게임에 조금 늦었지만 간단한 대답은 버튼 div 후에 H4를 이동하는 것입니다. 이것은 부동의 일반적인 문제입니다. 항상 나머지 내용보다 먼저 부동 소수점을 정의하지 않으면 추가 줄 바꿈 문제가 발생합니다.
<div class="panel-heading">
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
<h4>Panel header</h4>
</div>여기서 문제는 플로트가 다른 항목 뒤에 정의 될 때 플로트의 상단이 바로 앞 요소의 마지막 줄 위치에서 시작된다는 것입니다. 따라서 이전 항목이 줄 3으로 줄 바꿈되면 플로트도 줄 3에서 시작됩니다.
플로트를 목록의 맨 위로 이동하면 아래로 밀어 넣을 이전 요소가없고 플로트 이후의 모든 항목이 맨 윗줄에 렌더링되기 때문에 문제가 제거됩니다 (모든 항목을위한 공간이 줄에 있다고 가정).
정확하고 부정확 한 순서 및 효과의 예 :
http://www.bootply.com/HkDlNIKv9g
답변
부모 요소를 지우려면 “clearfix”를 적용해야합니다. 다음으로, 헤더 제목의 h4는 헤더 전체로 확장되므로 clearfix를 적용한 후 하위 요소를 아래로 밀어 헤더 div의 높이를 더 크게 만듭니다.
여기에 수정 사항이 있습니다. 코드로 바꾸십시오.
<div class="panel-heading clearfix">
<b>Panel header</b>
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
</div>2015 년 12 월 22 일에 편집 됨-div 제목에 .clearfix 추가
답변
제목 안에 버튼 그룹을 배치하고 하단에 clearfix를 추가했습니다.
<div class="panel-heading">
<h4 class="panel-title">
Panel header
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
</h4>
<div class="clearfix"></div>
</div>답변
이렇게 btn-group안에 넣어보세요 H4..
<div class="panel-heading">
<h4>Panel header
<span class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</span>
</h4>
</div>답변
당신은 일부 옳습니다. 로 <b>title</b>그 벌금을 보이지만, 내가 사용하고 싶습니다 <h4>.
나는 <h4 style="display: inline;">작업에 이음새를 넣었습니다 .
이제 몇 가지 수직 정렬 만 추가하면됩니다.
답변
이 경우 .clearfix컨테이너 끝에 플로팅 요소를 추가해야합니다 .
<div class="panel-heading">
<h4>Panel header</h4>
<div class="btn-group pull-right">
<a href="#" class="btn btn-default btn-sm">## Lock</a>
<a href="#" class="btn btn-default btn-sm">## Delete</a>
<a href="#" class="btn btn-default btn-sm">## Move</a>
</div>
<span class="clearfix"></span>
</div>