CSS/부트 스트랩의 컨테이너 너비에 따라 레이블 크기가 달라집니다.

Question

모든 장치에 2 행의 레이블이 필요합니다 (이미지의 블록 2). 몇 가지 요구 사항이 있습니다 :

• 첫 번째 행은 4 개 레이블이
• 두 번째 행이 5 개 라벨
• 처음 3 개 라벨 (Demo Topic Text 1, Demo Topic Text 2, Demo Topic Text 3) 지난 3 개 레이블에 비해 1.5 배 더 큰해야 (Demo Topic Text 7, Demo Topic Text 8, Demo Topic Text 9).
• 레이블 Demo Topic Text 3, Demo Topic Text 4 및 Demo Topic Text 5 내가 CSS/부트 스트랩을 사용하여 모든 장치에 대해이 문제를 해결하는 방법을 모르는 Demo Topic Text 7, Demo Topic Text 8, Demo Topic Text 9.

보다 1.25 배 더 큰해야합니다.

HTML 코드 :

<div class="container"> 
    <div class="row" id="ho_intro_content"> 
     <div class="col-xs-12"> 
     <div class="row"> 
      <div class="col-xs-12 text-center"> 
      <h1>Hello World!</h1> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 text-center"> 
      <div class="ho_in_featured_topics"> 
       <span class="label huge">Demo Topic Text 1</span> 
       <span class="label huge">Demo Topic Text 2</span> 
       <span class="label huge">Demo Topic Text 3</span> 
       <span class="label large">Demo Topic Text 4</span> 
      </div> 
      <div class="ho_in_featured_topics"> 
       <span class="label large">Demo Topic Text 5</span> 
       <span class="label large">Demo Topic Text 6</span> 
       <span class="label medium">Demo Topic Text 7</span> 
       <span class="label medium">Demo Topic Text 8</span> 
       <span class="label medium">Demo Topic Text 9</span> 
      </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 text-center">   
      <button type="button" class="btn btn-danger btn-lg" id="ho_in_click_me_button" aria-label="Click me!">Click me!</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

CSS 코드 :

.ho_in_featured_topics .label { 
    background-color: #e8e8e8; 
    color: #5e5e5e; 
    font-weight: 400; 
} 

Answer 1

당신은 .label 클래스 font-size의 기본 값을 설정해야합니다. 그런 다음 상속을 통해 해당 값을 기준으로 비율을 조정합니다.

문서에서 처음으로 font-size을 사용하려면 다음과 같이 rem units을 사용할 수 있습니다. 1rem.

.ho_in_featured_topics .label { 
    font-size: 16px; 
} 
.ho_in_featured_topics .label.large { 
    font-size: 1.25em; 
} 
.ho_in_featured_topics .label.huge { 
    font-size: 1.5em; 
} 

Answer 2

이것은 더 많은 수학 사항입니다. 그러나 이것은 내가 생각해내는 것입니다.

이 내 문제가 해결되지

<div class="container-fluid bg-primary "> 
<div class="row" id="ho_intro_content"> 
    <div class="col-xs-12"> 
    <div class="row"> 
     <div class="col-xs-12 text-xs-center"> 
     <h1>Hello World!</h1> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 text-center"> 
     <div class="ho_in_featured_topics"> 
      <span class="label huge col-xs-3.1">Demo Topic Text 1</span> 
      <span class="label huge col-xs-3.1">Demo Topic Text 2</span> 
      <span class="label huge col-xs-3.1">Demo Topic Text 3</span> 
      <span class="label large col-xs-2.7">Demo Topic Text 4</span> 
     </div> 
     <div class="ho_in_featured_topics"> 
      <span class="label large col-xs-2.7">Demo Topic Text 5</span> 
      <span class="label large col-xs-2.7">Demo Topic Text 6</span> 
      <span class="label medium col-xs-2.2">Demo Topic Text 7</span> 
      <span class="label medium col-xs-2.2">Demo Topic Text 8</span> 
      <span class="label medium col-xs-2.2">Demo Topic Text 9</span> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 text-center">   
     <button type="button" class="btn btn-danger btn-lg text-xs-center" id="ho_in_click_me_button" aria-label="Click me!">Click me!</button> 
     </div> 
    </div> 
    </div> 
</div>