Question

我想更改列的宽度，但我不确定如何操作。我尝试过很多东西，但似乎没有工作。这是我的代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

如果您使用ID，则应在css中调用#Example，如果是class，则应调用.Example。

但您也可以从引导网格处理列宽。如果您正在使用它，请查看以下文档以获取bootstrap 3.3。

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

bootstrap系统基于它的类工作，是col - * - 6 =＆gt;宽度为50％，因为它是12个可能列中的一半。

如果您想要20％的ish列，可以使用<div class="col-xs-2"></div>

详细了解网格系统的工作原理：https://getbootstrap.com/docs/4.0/getting-started/introduction/

如何在bootstrap上更改网格的宽度？

2 个答案: