Question

我希望在所有设备上都有2行标签（图像中的第2块）。有一些要求：

第一行有4个标签
第二行有5个标签
前3个标签（Demo Topic Text 1，Demo Topic Text 2，Demo Topic Text 3）应比最后3个标签（Demo Topic Text 7，Demo Topic Text 8大1.5倍， Demo Topic Text 9）。
标签Demo Topic Text 3，Demo Topic Text 4和Demo Topic Text 5应比Demo Topic Text 7，Demo Topic Text 8，Demo Topic Text 9.

我不知道如何使用CSS / Bootstrap为所有设备修复此问题。

HTML code：

  <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

您需要为font-size类设置.label的基值。然后通过继承基于该值进行缩放。

要使用文档中的初始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>

标签大小取决于CSS / Bootstrap中的容器宽度

2 个答案: