부트 스트랩 3 : list-group-item에서 오른쪽으로 이동하는 스팬 요소는 수직 공간을 사용하지 않습니다.

Question

부트 스트랩 3 list-group-item에는 아이콘, 텍스트 및 두 개의 아이콘/단추가 있습니다.

나는이 시도 :

<a class="list-group-item" ng-click="handleClick()"> 
    <span class="glyphicon glyphicon-file"></span> 
    Some text goes here 
    <button class="btn btn-xs btn-warning pull-right" ng-click="handleButtonClick()"><span class="glyphicon glyphicon-trash"></span></button> 
    <some:custom:span></some:custom:span> 
</a> 

결과가 한 줄에 맞는 경우는 잘 작동 : 윈도우가 실제 텍스트가되지 않도록 얇은 경우 그것은 또한 작동

한 줄에 들어가십시오 :

창문 텍스트를 한 줄에 머물 수 있지만 풀 오른쪽 스팬을위한 공간이 충분하지 않으면210

그러나, 상황이 엉망 :

은 내가 실제로 싶어하는 것은 pull-right 범위가 새로운 줄을 시작하고 오른쪽으로 정렬되고 list-group-item이 수직으로 확장되어 적합하게됩니다. 어떻게하면 될까요?

Answer 1

단추를 정렬 상태로 유지하려면 주위에 새 요소를 래핑하고 래핑 요소를 떠있게하십시오. 그런 다음 .clearfix 클래스가있는 목록 항목의 float을 지우고 높이를 고정합니다.

<div class="list-group"> 
    <a href="#" class="list-group-item clearfix"> 
    <span class="glyphicon glyphicon-file"></span> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    <span class="pull-right"> 
     <button class="btn btn-xs btn-info">CCS</button> 
     <button class="btn btn-xs btn-warning"> 
     <span class="glyphicon glyphicon-trash"></span> 
     </button> 
    </span> 
    </a> 
</div> 

여기에 라이브 예제를 참조하십시오 : http://jsfiddle.net/cdog/EpG7x/.

그러나 링크 내에 버튼을 배치하는 것은 HTML5 specification from W3C에 따라 유효하지 않습니다.

a 소자

정도로 긴 (예를 들어 버튼 또는 다른 링크) 내에 양방향 콘텐츠가 없기 때문에, 전체의 단락, 목록, 테이블 등 심지어 전체 부분을 감싸 수있다.

표가있는 패널을 사용하면 비슷한 결과를 얻을 수 있습니다.

<div class="panel panel-default"> 
    <table class="table table-hover"> 
    <tbody> 
     <tr> 
     <td> 
      <span class="glyphicon glyphicon-file"></span> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     </td> 
     <td class="text-right text-nowrap"> 
      <button class="btn btn-xs btn-info">CCS</button> 
      <button class="btn btn-xs btn-warning"> 
      <span class="glyphicon glyphicon-trash"></span> 
      </button> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

는 (부트 스트랩 v3.2.0에서 추가)를 .text-nowrap 클래스를 사용할 수 있습니다, 포장에서 셀 내부 컨텐츠를 방지합니다.

여기에 라이브 예제를 참조하십시오 : http://jsfiddle.net/cdog/6mFDH/.