CSS :hover and bootstrap 3

Question

我在 bootstrap 3 中制作导航栏，我发现了一些奇怪的东西。

<nav className="navbar navbar-inverse">
<div className="container-fluid">
  <div className="container">
    <div className="row">
      <div className="col-sm-3">
        <a href="#">
            Home
        </a>
      </div>
      <div className="col-sm-3">
        <a href="#">
             About us
        </a>
      </div>
      <div className="col-sm-3">
        <a href="#">
           Surveys
        </a>
      </div>
      <div className="col-sm-3">
        <a href="#">
            Statistics
        </a>
      </div>
    </div>
  </div>
</div>

这是这个组件的结构，这是 CSS，我尝试在其中制作 <a> :hover 上的属性较大

a:hover {
 text-decoration: none;
 color: inherit;
 transform: scale(1.1);
}

我不禁想知道为什么尽管其他属性有效，但转换却没有效果。不确定它是否改变了什么，但也许我会补充一点，我在这个应用程序中使用了 React。

Answer 1

Only elements positioned by the box model can be transformed. As a rule of thumb, an element is positioned by the box model if it has display: block. Source

您也可以使用display: inline-block;。