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类，以便它们以相同的宽度放置。我认为这是解决此问题的最佳方法。

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

Answer 2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
  <div class="row utility_col">
    <div class="col-3 vote_col d-flex justify-content-center">Vote</div>
    <div class="col-6 sign_col d-flex justify-content-center"> 
      <img src="./img/sign_up.png">
      Sign Up
    </div>
    <div class="col-3 d-flex justify-content-center">Login</div>
  </div>
</div>
</body>
</html>

您不必通过CSS给出宽度，只需使用bootstrap的网格系统即可。 .d-flex和.justify-content-center仅用于使其居中对齐。如果不需要，可以将其删除！

https://getbootstrap.com/docs/4.3/layout/grid/

Answer 3

请使用flex属性而不是宽度

.sign_col {
    display: flex;
    align-items: center;
   flex: 0 127px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>

Bootstrap列未获得自定义宽度

3 个答案: