这个定制的引导代码是否需要我缺少的东西？答案

【问题标题】：Does this customized bootstrap code need something that I'm missing?这个定制的引导代码是否需要我缺少的东西？
【发布时间】：2021-10-24 00:43:36
【问题描述】：

我正在做一个充满激情的项目，浏览 Bootstrap 文件并获取我喜欢的东西，删除我不喜欢/不需要的东西，并修改代码以使其符合我自己的个人风格。我还没有走得太远，但这是我需要帮助的事情，这可能会很有用，因为我会继续，这取决于人们如何帮助我。

我正在处理.col-xs-* 部分，我遇到了如下所示的问题。有谁知道为什么会这样？没有一列的间距正确，我不知道为什么。我已经在学校使用 bootstrap 多年了，但我实际上并不知道它是如何做到的。

我也会尝试发布我已经复制过来的代码。到目前为止，我只使用纯 CSS，我希望这与此级别的 JavaScript 内容无关，但如果我缺少明显的内容，请告诉我。

/* 
    The following stylesheet is an adaptation from Bootstrap and my own personal preferences.
    Most of the styles will be Bootstrap in structure but they will have only the parts that I want.
*/
.test {
  border: 1px solid black;
}

/*********************************
COLORS

- Blacks
#141314 - Smoky Black
#1b1a1b - Eerie Black
#212021 - Raisin Black

- Greys/Silvers
#767676 - Sonic Silver
#949394 - Spanish Gray
#a8a8a8 - Silver Chalice

#5295bf - Carolina Blue
#991eeb - Purple X 11
#a31621 - Ruby Red
**********************************/

/*#region CUSTOM CSS FOR VISUALIZATION ONLY */

.container {
    border: 1px solid blue;
}

.col-visual [class*="col-xs-"] {
  background-color: #991eeb;
  color: white;
  text-align: center;
  border: 1px solid black;
}

/*#endregion*/

/*#region COLORS */
/*#endregion*/

/*#region CONTAINER AND CONTAINER FLUID */
.container,
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-right: -15px;
  margin-left: -15px;
}

@media (min-width: 768px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}

/*Not sure if these are needed */
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after {
  display: table;
  content: " ";
}

.container:after,
.container-fluid:after {
  clear: both;
}
/*#endregion*/

/*#region ROW */
.row {
  margin-right: -15px;
  margin-left: -15px;
}

/* Not sure if these are needed */
.row:before,
.row:after {
  display: table;
  content: " ";
}

.row:after {
  clear: both;
}

/*#endregion*/

/*#region COLUMNS */
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

/*#endregion*/

/*#region EXTRA SMALL COLUMNS */
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}

/*#endregion*/

/*#region SWATCH (Color/image/icon tag thing) */
.swatch {
}

.swatch .swatch-content {
}

/*#endregion*/

<div class="container">

  <div class="row col-visual">
    <h2>Columns Visualization</h2>
    <div class="col-xs-12">
      <p>COL-12</p>
    </div>
    <div class="col-xs-11">
      <p>COL-11</p>
    </div>
    <div class="col-xs-1">
      <p>COL-1</p>
    </div>
    <div class="col-xs-10">
      <p>COL-10</p>
    </div>
    <div class="col-xs-2">
      <p>COL-2</p>
    </div>
    <div class="col-xs-9">
      <p>COL-9</p>
    </div>
    <div class="col-xs-3">
      <p>COL-3</p>
    </div>
    <div class="col-xs-8">
      <p>COL-8</p>
    </div>
    <div class="col-xs-4">
      <p>COL-4</p>
    </div>
    <div class="col-xs-7">
      <p>COL-7</p>
    </div>
    <div class="col-xs-5">
      <p>COL-5</p>
    </div>
    <div class="col-xs-6">
      <p>COL-6</p>
    </div>
    <div class="col-xs-6">
      <p>COL-6</p>
    </div>
  </div>
</div>

我省略了容器和行的东西，但这里就是一切。再次，对不起，这很长。我真的不知道从哪里开始寻求帮助。我想我还应该提到我正在通过一个角度项目来做到这一点。不确定这会有所不同。我只是喜欢组件的工作方式。

更新：我发现这些列比容器及其填充扩展得更远。我不确定如何解决这个问题，或者如果有人可以向我解释，Bootstrap 通常如何做到这一点？

编辑：我更新了代码 sn-p，因此它反映了我的整个项目。我真的不确定为什么这不能正常工作。蓝线显示了容器边界的位置，并且列仍然经过它。如何使列相对于容器而不是整个主体的百分比宽？

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

所以我找到了自己的答案。我遇到的问题是属性box-sizing: border-box; 不存在于代码的不同部分。我通过在我的 html 上交换 Bootstrap 中的 CSS 并检查它发现了这一点。简单的解决方案，但很难找到。

【讨论】：