html - Bootstrap 列未获得自定义宽度

Question

我正在使用 Bootstrap为网页设计。我的 HTML 如下所示

<div class="col utility_col">
  <div class="row">
    <div class="col vote_col">Vote</div>
    <div class="col sign_col"> 
      <img src="./img/sign_up.png">
      Sign Up
    </div>
    <div class="col">Login</div>
  </div> 
</div>

我的 CSS 如下所示

 .sign_col {
    display: flex;
    align-items: center;
    width: 127px;
}

如果我增加 .sign_col 的宽度，那么 .vote_col 的宽度也会增加。我该如何解决这个问题？

我的输出如下

Answer 1

您可以使用 css 变量根据其他人的宽度设置自己的宽度。例如，我使用 scss 作为 css 预处理器。

<div class="one">
</div>

<div class="two">
</div>

...

$one-width: 200px;

.one {
  width: $one-width;
  height: 200px;
  background-color: red;
  margin-bottom: 10px;
}

.two {
  width: $one-width * .50;
  height: 200px;
  background-color: blue;
  margin-bottom: 10px;
}

这里我根据一个人的宽度设置了二人组的宽度。

更新: 内行 - 有 3 个元素:投票、签名、登录。 给它们 col-lg-4、col-md-4、col-sm-4 类，以便它们以相同的宽度定位。我认为这是解决此问题的最佳方法。

我个人认为，手动操作宽度并不好。