Bootstrap 面板在较小尺寸上不需要的左右边距

Posted 2023-03-06

【中文标题】Bootstrap 面板在较小尺寸上不需要的左右边距

【英文标题】：Bootstrap panel unwanted right and left margins on smaller sizes

【发布时间】：2015-10-31 08:04:23

【问题描述】：

我使用 Bootstrap 和以下代码创建了一个面板：

<section class="container-fluid" id="stats">
<div class="panel panel-default col-md-6">
    <div class="panel-heading">
        <i class="fa fa-bar-chart fa-lg"></i>
        <strong>Statistics</strong>
    </div>
    <div class="panel-body">
        Something ...
    </div>
</div>
</section>

但输出在面板标题中左右有间隙。

如果我删除 col-md-6，问题就解决了。但我需要 6 列。 请帮帮我...

编辑：您可以查看此示例http://codepen.io/mbsmt/pen/eNXmoY

【参考方案1】：

您在左侧和右侧都有填充，因为默认情况下，Bootstrap 会为列添加装订线填充。装订线宽度为 15px。这是创建 .col-md- 类的 mixin：

// Located within less/variables.less
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;

// Located within less/mixins/grid.less
.make-md-column(@columns; @gutter: @grid-gutter-width) 
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

要删除填充，您有两种选择：

将默认填充更改为 0 像素。这可能会导致更大的问题，因为它会影响您的所有列布局。 针对此特定面板创建一些自定义 CSS 布局代码，例如 #stats > .panel.col-md-6。我在下面提供了一个示例。

#stats > .panel.col-md-6 
  padding-left: 0;
  padding-right: 0;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<section class="container-fluid" id="stats">
  <div class="panel panel-default col-md-6">
    <div class="panel-heading">
      <i class="fa fa-bar-chart fa-lg"></i>
      <strong>Statistics</strong>
    </div>
    <div class="panel-body">
      Something ...
    </div>
  </div>
</section>

【讨论】：

您所说的是图表图标与其左侧（灰色框）之间的间隙。我的问题是灰色标题框后的空白。

@MohammadSaberi 如果可以的话，请用你的 CSS 更新你的 OP。这将有助于我更全面地理解您的问题。

我正在使用 Bootstrap v3.3.5。为了澄清我的问题，我更改了快照图像并将 2 个红色箭头放在我在问题中提到的间隙上。我希望你能明白我的意思。

谢谢海因斯。我也将您的解决方案更改为“#stats > div.panel”以解决其他尺寸的问题。但是，我认为这是 Bootstrap v.3.3.5 中的一个错误，我报告了它。

【参考方案2】：

您也可以将面板包装在一个带有列类的 div 中，与面板类分开。它看起来像这样：

<section class="container-fluid" id="stats">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <i class="fa fa-bar-chart fa-lg"></i>
        <strong>Statistics</strong>
      </div>
      <div class="panel-body">
        Something ...
      </div>
    </div>
  </div>
</section>

【参考方案3】：

一个简单的样式可以像这样删除填充

<div style="padding:0" class="panel-heading preview" >

但我根本无法驾驭排水沟或面板之间的空间。