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

所以我的宽度设置为380px。我会把align-right放在哪里？或右边距说0？

我无法将其对齐到屏幕右侧。右边距之间存在难看的差距。我是Bootstrap的新手，但是我无法将其与正确的尝试对齐。

右边距：

Answer 1

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

如果您愿意，可以删除此填充，但不应更改引导程序文件，甚至更少将其某个列类更改为固定宽度。

你可以在这里看到填充：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;