html - Bootstrap CSS 对齐一个分区类

Question

我在 Bootstrap Mini CSS 中有这段代码。有问题的列是 col-md4

.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
    float: left;
}

.col-md-12 {
    width: 100%;
}

.col-md-11 {
    width: 91.66666667%;
}

.col-md-10 {
    width: 83.33333333%;
}

.col-md-9 {
    width: 75%;
}

.col-md-8 {
    width: 66.66666667%;
}

.col-md-7 {
    width: 58.33333333%;
}

.col-md-6 {
    width: 50%;
}

.col-md-5 {
    width: 41.66666667%;
}

.col-md-4 {
    width: 380px;
}

.container-fluid .row .col-md-4.side-bar.text-default {
}

所以我将宽度设置为 380 像素。我应该把 align-right 放在哪里？还是右边距说 0？

我无法将其对齐到屏幕右侧。右边距之间有一个丑陋的差距。我是 Bootstrap 的新手，但我无法尽可能地将其与正确的尝试对齐。

右边距:

Answer 1

默认情况下，Bootstrap 列的 padding 为 15px。

您可以根据需要删除此填充，但您不应该更改 Bootstrap 文件，更不用说将其中一个列类更改为固定宽度。

你可以在这里看到填充:

.container > div {
  position: relative;
  height: 100px;
  background-color: yellowgreen;
}
.container > div:nth-child(odd) {
  background-color: lime;
}
.content {
  height: 100%;
  background-color: dodgerblue;
}
.container > div::after {
  font-size: .8em;
  content: "padding";
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotateZ(270deg);
  transform-origin: top left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<main class="container">
  <div class="col-xs-8">
    <div class="content"></div>
  </div>
  <div class="col-xs-4">
    <div class="content"></div>
  </div>
</main>

---

最好的方法是在单独的 CSS 文件上使用实用程序类。

.container > div {
  position: relative;
  height: 100px;
  background-color: yellowgreen;
}
.container > div:nth-child(odd) {
  background-color: lime;
}
.content {
  height: 100%;
  background-color: dodgerblue;
}
.container > div:not(.col--no-padding)::after {
  font-size: .8em;
  content: "padding";
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotateZ(270deg);
  transform-origin: top left;
}
.col--no-padding {
  /*
     Will use !important for code snippet illustration purposes.
     Your file should be referenced AFTER Bootstrap.
  */
  padding: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<main class="container">
  <div class="col-xs-8">
    <div class="content"></div>
  </div>
  <div class="col-xs-4 col--no-padding">
    <div class="content"></div>
  </div>
</main>