代码之家  ›  专栏  ›  技术社区  ›  Andrius

CSS-完全删除列之间的间距?

margin twitter-bootstrap-3 css html
  •  0
  • Andrius  · 技术社区  · 8 年前 

    <div class="container">
    <div class="box center-block">
        <div class="row">
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="thumbnail">A</div>
            </div>
        </div>
    </div>
</div>

    和CSS: 

    .box {
    width: 300px;
    padding-top: 100px;
}
.row > div > div {
    width: 100px;
    height: 100px;
    margin: 0px;
}

    我可以删除行之间的空白,但不能删除列之间的空白。有没有办法强迫它? 我需要所有的“正方形”彼此相邻,没有任何边距(行和列之间)。

    你可以在这里看到它的外观: https://jsfiddle.net/a91zujkj/

    4 回复  |  直到 8 年前
        1
  •  0
  •   Community Mohan Dere    5 年前

    如果你真的想使用 col- .thumbnail 元素 width 100% 并使用 no-padding col公司- 

    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.box {
  width: 300px;
  padding-top: 100px;
}
.no-padding {
  padding-left: 0;
  padding-right: 0;
}
.thumbnail {
  width: 100%;
  height: 100px;
  margin: 0;
}
    <div class="container">
    <div class="box center-block">
        <div class="row">
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 no-padding">
                <div class="thumbnail">A</div>
            </div>
        </div>
    </div>
</div>

    实际上,您不需要使用 col公司- 类和浮点也不需要。另一种方法是使用 display: inline-block .

    这看起来是这样的: 

    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.wrapper {
  width: 300px;
  padding-top: 100px;
  margin: 0 auto;
  font-size: 0;
}

.item {
  border: 1px solid #eee;
  width: 100px;
  height: 100px;
  display: inline-block;
  font-size: initial;
}
    <div class="wrapper">
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
  <div class="item">A</div>
</div>

    CSS Grid Layout

    CSS网格布局擅长将页面划分为主要区域,或定义由HTML原语构建的控件各部分之间的大小、位置和层关系。

    事情是这样的: 

    .wrapper {
  padding-top: 100px;
  width: 300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
}

.item {
  border: 1px solid #ddd;
  height: 100px;
  width: 100px;
}
    <<div class=“item”>A</div>
<div class=“item”>A</div>
<div class=“item”>A</div>
<div class=“item”>A</div>
<div class=“item”>A</div>
<div class=“item”>A</div>
</div>
        2
  •  0
  •   Michael Coker    8 年前

    .col-*-4 宽于 100px ,这是您为 .thumbnail

    您只需删除 .col-* 类别和用途 .pull-left 

    .box {
    width: 300px;
    padding-top: 100px;
}
.row > div > div {
    width: 100px;
    height: 100px;
    margin: 0;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="box center-block">
        <div class="row">
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
            <div class="pull-left">
                <div class="thumbnail">A</div>
            </div>
        </div>
    </div>
</div>
        3
  •  0
  •   Sidharth Gusain    8 年前

    去除 padding-left 和 padding-right .col 类,然后更改 width: 100px; width: 100%; 对于 .row > div > div 

    .box {
    width: 300px;
    padding-top: 100px;
}
.padding-0{
    padding-right:0 !important;
    padding-left:0 !important;
}
.row > div > div {
    width: 100%;
    height: 100px;
    margin: 0px;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="box center-block">
        <div class="row">
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
            <div class="col-md-4 col-xs-4 padding-0">
                <div class="thumbnail">A</div>
            </div>
        </div>
    </div>
</div>
        4
  •  -1
  •   OB1.K    8 年前

    行具有自己的样式并向元素添加边距,您可以通过添加以下内容来删除它: 

    .box >.row{
  margin:0;
}
    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    1 年前
    magenta placenta  ·  将css变量合并为一个变量
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    1 年前
    Luckkks  ·  过渡色工作不正常
    1 年前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号