如何在boostrap sm-3中相对修改字体大小

Question

<div class="container">
  <div class="row">

    <!--main content-->
    <div class="col-sm-9 col-xs-12">
        <ul class="HomeIndex">
          <li>relative sentence</li>
        </ul>
    </div><!--main content-->

    <!--sidebar-->
    <div class="col-sm-3 hidden-xs" style="padding: 0px">

    </div><!--side bar-->
 </div>

我想修改一下李中的关系句。my.css像这样写

.home_index{
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-size: 1.5rem;
    line-height: 2
}   

我以为字体大小会被rem修改，但字体大小保持不变。我可能会错过代码的编写。如何根据屏幕的宽度修改字体大小。

请给我合适的代码。

Answer 1

简单的类错误:您的ul有一个HomeIndex类，而您的样式是.home_index。要么将您的ul类更改为home_index，要么将您的样式更改为.HomeIndex。

Answer 2

在你的网页中使用home_index

  <!--main content-->
    <div class="col-sm-9 col-xs-12">
        <ul class="home_index">
          <li>relative sentence</li>
        </ul>
    </div><!--main content-->

或

将css类home_index更改为HomeIndex