Css 从引导数据库3的列中删除填充_Css_Twitter Bootstrap_Html

Css 从引导数据库3的列中删除填充

css twitter-bootstrap html

Css 从引导数据库3的列中删除填充,css,twitter-bootstrap,html,Css,Twitter Bootstrap,Html,问题： <div class="col-md-12"> <h2>OntoExplorer<span style="color:#b92429">.</span></h2> <div class="col-md-4"> <div class="widget"> <div class="widget-header">

问题：

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

删除引导3中列md-*左右两侧的填充/边距

<style>
.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>

HTML代码：

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>


探险家。
尺寸
结果

所需输出：

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

目前，此代码在两列的右侧和左侧添加了填充/边距。我想知道，为了去掉侧面多余的空间，我缺少了什么

注意：

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

如果我删除“col-md-4”，则两列都会扩展到100%，但我希望它们彼此相邻。

您可以创建一个用于删除边距的新类，并可以应用于要删除额外边距的元素：

.margL0 { margin-left:0 !important }

！重要信息：它将帮助您删除默认页边距或覆盖当前页边距值

并应用于要从中删除左侧边距的div

，通常用于包装两列，而不是

。col-md-12

-这是一个包含另一列的列。毕竟，它没有

col-md-12

所带来的额外边距和填充空间，而且也不考虑列所引入的负左右边距空间

<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

引导程序4已添加

Bootstrap 3.4增加了

引导3：我总是将此样式添加到我的无引导/SASS中：

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

然后在HTML中，您可以编写：

<div class="row row-no-padding">

您可能还希望仅删除某些设备大小的填充（SASS示例）：

如果您希望媒体查询的最大宽度部分支持向上的小型设备，则可以将其删除。

专门针对SASS mixin：

[class*="col-"]
  padding: 0
  margin: 0

@mixin no-padding($side) {
    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

然后在HTML中，您可以使用

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

当然，您可以@只包含您需要的那些声明。

另一种解决方案是重新定义设置列填充的变量，这种解决方案只有在从较少的源代码编译引导时才可行

您将在

variables.less

文件中找到该变量：它被称为

@grid-ground-width

资料来源是这样描述的：

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

将其设置为0，编译

bootstrap.less

，并包含生成的

bootstrap.css

。你完了。如果您已经在使用像我这样的引导源，那么它可以作为定义附加规则的替代方法。

仅减少列上的填充并不能解决问题，因为您会扩展页面的宽度，使其与页面的其余部分不均匀，例如navbar。您需要同样减少行上的负边距。以@martinedwards'LESS为例：

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

以上所有的解决方案对我来说都不是完美的。接下来，我能够创造一些适合我的东西。在这里，我还使用了一个媒体查询，将其限制在小屏幕上

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}


探险家。
尺寸
结果

您可以将一类行添加到col-md-4中的div中，该行的-15px边距将平衡列中的边沟。很好地解释了Bootstrap3中的槽和行。


<style>
.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>

.col-md-12{
左侧填充：0px！重要；
右填充：0px！重要；
}
.col-md-8{
左侧填充：0px！重要；
右填充：0px！重要；
}
.col-md-4{
左侧填充：0px！重要；
右填充：0px！重要；
}

您可以使用bootstrap创建较少的mixin来管理列的边距和填充，例如，

用法：

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

同样，对于设置边距/填充零，您可以使用

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px

我想它更容易使用

margin:-30px;

覆盖引导设置的原始值

我试过了

margin: 0px -30px 0px -30px;

这对我来说很有效。

建立在。不仅包括我们根本不需要填充物的情况，还包括我们有标准尺寸填充物的情况

然后输出：

.padding--none {
  padding: 0 !important;
}

.padding--xs {
  padding: 5px !important;
}

.padding--s {
  padding: 10px !important;
}

.padding--m {
  padding: 15px !important;
}

.padding--l {
  padding: 20px !important;
}

.padding-top--none {
  padding-top: 0 !important;
}

.padding-top--xs {
  padding-top: 5px !important;
}

.padding-top--s {
  padding-top: 10px !important;
}

.padding-top--m {
  padding-top: 15px !important;
}

.padding-top--l {
  padding-top: 20px !important;
}

.padding-right--none {
  padding-right: 0 !important;
}

.padding-right--xs {
  padding-right: 5px !important;
}

.padding-right--s {
  padding-right: 10px !important;
}

.padding-right--m {
  padding-right: 15px !important;
}

.padding-right--l {
  padding-right: 20px !important;
}

.padding-bottom--none {
  padding-bottom: 0 !important;
}

.padding-bottom--xs {
  padding-bottom: 5px !important;
}

.padding-bottom--s {
  padding-bottom: 10px !important;
}

.padding-bottom--m {
  padding-bottom: 15px !important;
}

.padding-bottom--l {
  padding-bottom: 20px !important;
}

.padding-left--none {
  padding-left: 0 !important;
}

.padding-left--xs {
  padding-left: 5px !important;
}

.padding-left--s {
  padding-left: 10px !important;
}

.padding-left--m {
  padding-left: 15px !important;
}

.padding-left--l {
  padding-left: 20px !important;
}

有时，可能会丢失所需的列填充。他们最终会粘在一起。为了防止出现这种情况，您可以按如下方式更新该类：

<div class="col-md-3 NoPaddingForChildren">
        <div class="col-md-6">
                    <label>Id</label>
                    <input ng-model="ID" class="form-control">
        </div>
        <div class="col-md-6">
                    <label>Value</label>
                    <input ng-model="Val" class="form-control">
        </div>
</div>

只需添加“无填充”，这是bootstrap 3中内置的类

将列包装在一个.row中，并向该div添加一个名为“无边沟”的类

使用css删除/自定义引导槽参考：

/*删除*/
.排水沟-0.5排{
右边距：-0px；
左边距：-0px；
}
.gutter-0>[class^=“col-”]，.gutter-0>[class^=“col-”]{
右边填充：0px；
左侧填充：0px；
}
/*定制*/
.排水沟-6.5排{
右边距：-3px；
左边距：-3px；
}
.gutter-6>[class^=“col-”]，.gutter-6>[class^=“col-”]{
右侧填充：3px；
左：3倍；
}


缩略标签
更多

缩略标签
更多

缩略标签
更多

缩略标签
更多

如果您下载带有SASS文件的引导程序，您将能够编辑配置文件，其中有列边距设置，然后保存它，这样SASS将计算列的新宽度

此后仅在引导程序4中可用

<div class="p-0 m-0">
</div>

注意：.p-0和.m-0已经添加了bootstrap.css。您可以自定义引导网格系统并定义自定义响应网格

更改以下檐槽宽度的默认值

<div class="container">
  <div class="row no-gutter">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>
</div>

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

<div class="p-0 m-0">
</div>

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-md-12">
            [YOUR CONTENT HERE]
        </div>
    </div>
</div>

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

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

gem "bootstrap", github: "srghma/bootstrap-rubygem-without-gutter"

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}