부트 스트랩에서 사용 가능한 공간을 채우십시오.

Question

부트 스트랩으로 항목 목록을 렌더링하려고합니다. 각 항목에는 아이콘, 일부 왼쪽 맞춤 콘텐츠 및 오른쪽 맞춤 콘텐츠가 표시됩니다. 다음과 같이 표시됩니다.

+----------------------------------------------------------+ 
|     Peyton Manning    Denver | 
| [vertically  QB       Broncos | 
| centered icon] #18         | 
|     Tenesee        | 
+----------------------------------------------------------+ 
|     Andrew Luck    Indianapolis | 
| [vertically  QB        Colts | 
| centered icon] #7         | 
|     Stanford        | 
+----------------------------------------------------------+ 

시도 할 때 ul list-inline을 사용했습니다. 그 이유는 아이콘이 작아지기 때문입니다. 전체 부트 스트랩 열을 차지하지 않습니다. 그러나 목록 인라인을 사용하면 다른 열이 나머지 공간을 차지하게하는 방법을 모르겠습니다. 나는이 시도되었다

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-lg-12"> 
    <ul class="list-inline"> 
     <li> 
     <i class="glyphicon glyphicon-tree-conifer" style="font-size:2.2rem; top:-10px;"></i> 
     </li> 
     <li> 
     <h4 style="margin-top:4px;">Peyton Manning</h4> 
     <div class="row"> 
      <div class="col-xs-8"> 
      <h5>QB</h5> 
      <h5>#18</h5> 
      <h5>Tennessee</h5> 
      </div> 
      <div class="col-xs-4 pull-right"> 
      <h5>Denver</h5> 
      <h5>Broncos</h5> 
      </div> 
     </div> 
     </li> 
    </ul> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-lg-12"> 
    <ul class="list-inline"> 
     <li> 
     <i class="glyphicon glyphicon-tree-conifer" style="font-size:2.2rem; top:-10px;"></i> 
     </li> 
     <li> 
     <h4 style="margin-top:4px;">Andrew Luck</h4> 
     <div class="row"> 
      <div class="col-xs-8"> 
      <h5>QB</h5> 
      <h5>#7</h5> 
      <h5>Stanford</h5> 
      </div> 
      <div class="col-xs-4 pull-right"> 
      <h5>Indianapolis</h5> 
      <h5>Colts</h5> 
      </div> 
     </div> 
     </li> 
    </ul> 
    </div> 
</div> 

나는 아이콘을 포함하고 내가 왼쪽 정렬 할 수 있도록하고 마우스 오른쪽 정렬 내용을 그 공간에 공간의 나머지 부분을 잡아하는 방법을 모르겠어요. 누군가 나를 올바른 방향으로 조종 해 줄 수 있습니까?

감사합니다.

Answer 1

부트 스트랩 3에는 왼쪽과 오른쪽으로 각각 부동 한 pull-left과 pull-right 클래스가 있습니다.

부트 스트랩의 그리드 시스템과 그 시스템을 사용할 수 있으며 마크 업이 적은 경우 원하는 결과를 얻을 수 있습니다.

HTML :

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-1 text-center"> 
      <i class="glyphicon glyphicon-tree-conifer product-icon"></i> 
     </div> 
     <div class="col-xs-5"> 
      <div class="pull-left"> 
       <h5>QB</h5> 
       <h5>#18</h5> 
       <h5>Tennessee</h5> 
      </div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="pull-right"> 
       <h5>Denver</h5> 
       <h5>Broncos</h5> 
      </div> 
     </div> 
    </div> 
</div> 

CSS :

.product-icon { font-size:2.2rem; margin-top:20px;} 

Here 데모와 jsfiddle입니다. 나는 col-xs- * 만 사용했지만 간단하게 유지했습니다.

: 아이콘을 가운데 맞추기 위해 text-center 클래스를 사용할 수 있습니다.이 클래스는 부트 스트랩에서도 제공됩니다. div.row의 높이가 고정되어 있지 않으므로 CSS를 사용하여 아이콘을 수직으로 정렬하는 것은 쉽지 않습니다. 그래서 나는 작은 margin-top을 그 대신에 줬다.