html - 如何更改 Bootstrap 中网格的宽度？

Question

我想更改列的宽度，但我不太确定该怎么做。我尝试了很多东西，但它们似乎没有用。这是我的代码

.left-box {
    background-color: green;
    width: 20%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
    <div class="col-xs-6 col-md-4" id="left-box">
        <h6>About me</h6>
    </div>
    <div class="col-xs-6 col-md-4">
        <h6>About me</h6>
    </div>
    <div class="col-xs-6 col-md-4">
        <h6>About me</h6>
    </div>
</div>

Answer 1

如果你使用ID，它应该在css中调用#Example，如果它是一个class，它应该调用.示例.

但是您也可以处理 Bootstrap 网格中的列宽。如果您正在使用 bootstrap 3.3，请查看以下文档。

https://getbootstrap.com/docs/3.3/css/#grid

如果是bootstrap 4， https://getbootstrap.com/docs/4.0/layout/grid/

#left-box {
  width: 50%;
  background-color: green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-6 col-md-4" id="left-box">
    <h6>About me</h6>
  </div>
  <div class="col-xs-6 col-md-4">
    <h6>About me</h6>
  </div>
  <div class="col-xs-6 col-md-4">
    <h6>About me</h6>
  </div>
</div>