부트 스트랩 4의 플렉스 클래스를 표 셀 상위의 높이로 가져옵니다.

Question

글꼴 Awesome 5 (공식 CDN)와 함께 부트 스트랩 4 CSS 및 JS (공식 CDN)를 사용하고 있습니다.

FA5 아이콘은 텍스트이기 때문에 원래는 부트 스트랩의 text-center 클래스를 사용하고있었습니다. 그런 다음 큰 너비 디스플레이에서 아이콘을 더 잘 분산하도록 text-justify을 사용해 보았지만 전혀 작동하지 않았습니다.

다음은 마크 업의 표 셀 부분입니다. 나는 templating (Jinja2)이 상당히 길기 때문에 모든 것을 여기에 붙이고 싶지 않았다.

<td> 
    <div class="container-fluid d-flex justify-content-between"> 
    <i class="fas fa-fw fa-chevron-up"></i> 
    <i class="fas fa-fw fa-chevron-down"></i> 
    <i class="fas fa-fw fa-star"></i> 
    </div> 
</td> 

표 셀은 전체 높이가 아니며 아이콘이 중심을 벗어나는 것을 제외하고는 예상대로 표시됩니다.

이 사람이 d-flex 요소는 부모 셀의 전체 높이를 사용하여 만들 수있는 매우 간단한 방법이 있습니까 ? 또는 표 셀을 사용하여 투표, 하향 투표 및 즐겨 찾기 아이콘을 만드는 것이 일반적으로 더 좋은 방법일까요? 또한 현재 점수/즐겨 찾기 번호를 테이블의 다른 모든 셀과 잘 정렬하는 방법을 찾아야합니다. 기존 솔루션이나 조언이 있으면 도움이 될 것입니다.

편집 : 추가 고려 사항으로, 나는이 아이콘이 결과적으로 버튼의 내부에있을 것이라고 덧붙여 야합니다.

감사합니다.

Answer 1

align-items-center 부트 스트랩 클래스를 사용하여 요소 중심을 정렬합니다. 커스텀 라인 높이를 사용했다면, 그것을 제거하십시오.

<td> 
     <div class="container-fluid d-flex justify-content-between align-items-center"> 
     <i class="fas fa-fw fa-chevron-up"></i> 
     <i class="fas fa-fw fa-chevron-down"></i> 
     <i class="fas fa-fw fa-star"></i> 
     </div> 
    </td> 

참고 : 질문은 분명하지 않았습니다. 난 당신의 fa 아이콘을 수직으로 셀 중앙에 맞추기위한 해결책을 제시했습니다. 같은 것을 묻고 싶습니다 ...

Answer 2

아이콘은 결국 버튼 안에 있다고 말합니다. 왜 버튼 그룹을 사용하지 않습니까? 또는 bootstraps col 클래스를 사용하여 항목을 정렬하십시오. 버튼의 높이를 100 %로 설정하여 셀의 전체 높이를 차지합니다. 두 아이디어 모두 아래에 나와 있습니다.

나는 .d-flex와 .container-fluid를 사용하는 이유는이

td{ 
 
    height: 100px; 
 
} 
 
.btn, .btn-group{ 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <div> 
 
      \t <span class="col-sm-4"> 
 
\t   <i class="fas fa-fw fa-chevron-up"></i> 
 
      \t </span> 
 
      \t <span class="col-sm-4"> 
 
        <i class="fas fa-fw fa-chevron-down"></i> 
 
      \t </span> 
 
      \t <span class="col-sm-4"> 
 
        <i class="fas fa-fw fa-star"></i> 
 
      \t </span> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <div class="btn-group" role="group" aria-label="Basic example"> 
 
       <button type="button" class="btn btn-light"> 
 
       <i class="fas fa-fw fa-chevron-up"></i> 
 
       </button> 
 
       <button type="button" class="btn btn-light"> 
 
       <i class="fas fa-fw fa-chevron-down"></i> 
 
       </button> 
 
       <button type="button" class="btn btn-light"> 
 
       <i class="fas fa-fw fa-star"></i> 
 
       </button> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 

 
    <script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer 3

도움이되기를 바랍니다? 컨테이너 유체 클래스에는 다른 상위 태그를 사용하십시오.