버튼 위치가 잘못된 부트 스트랩 3 패널 헤더

Bootstrap 3을 사용하고 있으며 오른쪽 상단의 패널 헤더에 몇 가지 버튼을 추가하고 싶습니다. 추가하려고 할 때 제목 기준선 아래에 표시됩니다.

코드 : http://bootply.com/82631

제목, 패널 제목 또는 버튼에 추가해야하는 누락 된 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>

http://bootply.com/98827

여기 게임에 조금 늦었지만 간단한 대답은 버튼 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>

http://bootply.com/lpXoMPup2d

당신은 일부 옳습니다. 로 <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>

http://www.bootply.com/NCXkOtIkD6

.panel-heading 도움말에서 추가 클래스를 사용하는 것을 발견했습니다.

<div class="panel-heading contains-buttons">
   <h3 class="panel-title">Panel Title</h3>
   <a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>

그리고이 적은 코드를 사용합니다.

.panel-heading.contains-buttons {
    .clearfix;
    .panel-title {
        .pull-left;
        padding-top:5px;
    }
    .btn {
        .pull-right;
    }
}

h4소자 블록으로 표시된다. 테두리를 추가하면 무슨 일이 일어나는지 알 수 있습니다. 오른쪽에 무언가를 띄우려면 다음과 같은 여러 옵션이 있습니다.

1. 블록 (h4) 요소 앞에 플로팅 된 항목 을 배치 합니다.
2. h4 요소도 플로팅합니다.
3. h4 요소를 인라인으로 표시합니다.

두 경우 모두 clearfix컨테이너 요소에 클래스를 추가 하여 버튼에 올바른 패딩을 가져와야합니다.

panel-titleh4 요소에 클래스 를 추가 하거나 패딩을 조정할 수도 있습니다 .

아니면 이거? 행 클래스 사용

  <div class="row"> 
  <div class="  col-lg-2  col-md-2 col-sm-2 col-xs-2">
     <h4>Panel header</h4>
  </div>
 <div class="  col-lg-10  col-md-10 col-sm-10 col-xs-10 ">
    <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>