Блог

Главная - Вопросы по программированию - Размер метки в зависимости от ширины контейнера в CSS / Bootstrap

Размер метки в зависимости от ширины контейнера в CSS / Bootstrap

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я хочу иметь 2 ряда меток на всех устройствах (блок 2 на изображении). Есть несколько требований:

  • В первой строке 4 метки
  • Во второй строке 5 меток
  • Первые 3 метки ( Demo Topic Text 1 , Demo Topic Text 2, Demo Topic Text 3 ) должны быть в 1,5 раза больше, чем последние 3 метки ( Demo Topic Text 7 , Demo Topic Text 8 , Demo Topic Text 9 ).
  • Метки Demo Topic Text 3 Demo Topic Text 4 и Demo Topic Text 5 должны быть в 1,25 раза больше, чем Demo Topic Text 7 , Demo Topic Text 8 , Demo Topic Text 9.

Я не знаю, как исправить это для всех устройств, используя CSS / Bootstrap.

введите описание изображения здесь

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;
}

Ответ №1:

Вам нужно будет установить базовое значение font-size для .label класса. Затем масштабируйте на основе этого значения посредством наследования.

Чтобы использовать инициал font-size в документе, вы можете использовать единицы rem, такие как: 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;
}

Комментарии:

1. Это не решает мою проблему: i.imgur.com/CMplZhZ.png Первая строка должна содержать первые 4 метки. Вторая строка должна содержать последние 5 меток… Есть идеи?

2. Я попытался изменить 16 пикселей на другой размер, но большие и огромные метки не меняют свой размер, когда я его меняю…

Ответ №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>
Метки: