Question

我正在玩bootstrap，刚发现我的bootstrap列似乎有内置的填充和边距。如何删除默认值？在我附上的例子中，我想例如a）将橙色和蓝色除法之间的距离减小到0px，b）删除左右边距。

Answer 1

这是我用于一次性行的，我不想填充：

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

你显然可以将它应用于所有专栏，但老实说....我会在你做之前三思而后行。排水沟是有原因的。您不希望文本在其他文本旁边运行，等等。

此外，如果您将背景颜色直接应用于列元素而不是列中的元素，则背景颜色将会触摸，但文本内部仍会有填充。

最后，小心删除左右边距。每列应该在一行中，每一行应该在一个容器中。容器的每侧默认边距为+15。该行的边距为-15。列有+15。这允许直接在容器中的内容和列中的内容在页面下方的直线垂直线上对齐。否则你就会有左右跳跃的东西，看起来很奇怪。

什么都不应该直接连续进行。它位于容器或列中。

Answer 2

由于bootstrap是基于类的样式框架，只需在自己的内部注入一些自己的CSS。 https://jsfiddle.net/f98ctLy5/（确保缩小，因为默认情况下，bootstrap是响应式的。）

<强> HTML /自举

<div class='row'>
    <div class='col-md-8 main'>Sample</div>
    <div class='col-md-4 child'>Side</div>
</div>

<强> CSS

.main {
            margin:0;
            padding:0;
            background-color:#999;
        }

.child {
            margin:0;
            padding:0;
            background-color:#ccc;
        }

希望有所帮助！

Answer 3

a）将橙色和蓝色分区之间的距离减小到0px

您可以customize your Bootstrap here并@grid-gutter-width变量0px。这样您就不需要在HTML中添加额外的类了。

b）删除左右边距

对于全宽布局，请始终使用.container-fluid类而不是.container。

Answer 4

您可以尝试删除包含列

的div（class = row）

编辑：您可以将行留在那里，但将padding:0应用于其中包含内部div的列div

无论如何，我不太确定，因为我在手机上，但我认为你并没有关闭最外面的div

Answer 5

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap</title>
  <style>
    .man{
      background-color: yellow;
    }
    .shi{
      background-color: violet;
    }
    </style>
</head>
<body>
<div class="row">
  <div class="man col-xs-6">Lorem</div>
  <div class="shi col-xs-6">Ipsum</div>
</div>
</body>
</html>

我认为这就是你想要的，快乐编码！

Answer 6

试试此代码

＆＃13;

.col-xs-8{
  background-color:red;
}
.col-xs-4{
  background-color:blue;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-8">
      lorem
    </div>
    <div class="col-xs-4">
      ipsum
    </div>
  </div>
</div>

＆＃13;

我的Bootstrap列有边距和填充，我无法删除

6 个答案: