html - 专栏没有 margin-6ren

html - 专栏没有 margin

转载作者：太空宇宙更新时间：2023-11-04 07:08:17

我正在使用 Bootstrap 3.3.7。我不明白为什么我的较小的列没有与较大的列保持边距。 See the demo here .

列之间有一个 10px 边距。

外汇。第一行有以下列:600x410px - 600x200px 300x200px。

所以 200px + 200px + 10px 边距 = 410 高度。因此我给大柱子设置了 410px 的高度。

为什么他们不对齐？

/* Card and Button */

    body {
        background-color: #f5f5f5;
    }
    div { 
        background-color: #fff;
    }
    .index-content a:hover {
      color: black;
      text-decoration: none;
    }

    .index-content {
      /*margin-bottom: 20px;*/
      /*padding: 50px 0px;*/
    }

    .index-content .row {
      margin-top: 20px;
    }

    .index-content a {
      color: black;
    }

    .index-content .card {
      background-color: #FFFFFF;
      padding: 0;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }

    .index-content .card:hover {
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
      color: black;
    }

    .index-content .card img {
      width: 100%;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      height: 350px;
    }

    .index-content .card h4 {
      margin: 20px;
    }

    .index-content .card p {
      margin: 20px;
      opacity: 0.65;
    }

    .index-content .blue-button {
      width: 100px;
      -webkit-transition: background-color 1s, color 1s;
      /* For Safari 3.1 to 6.0 */
      transition: background-color 0.5s, color 0.5s;
      min-height: 20px;
      background-color: #002E5B;
      color: #ffffff;
      border-radius: 4px;
      text-align: center;
      font-weight: lighter;
      margin: 0px 20px 15px 20px;
      padding: 5px 0px;
      display: inline-block;
    }

    .index-content .blue-button:hover {
      background-color: #dadada;
      color: #002E5B;
    }

    /* GRID ELEMENTS MEDIA QUERIES */

    
    @media (min-width: 768px) {
        .card {
            position: relative;
        }
        .card-content {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        .card-content h4,
        .card-content p {
            color: white;
            width: 100%;
            float: left;
            margin: 0 0 5px;
        }
        .card-content a {
            float: right;
        }
        .index-content .card h4,
        .index-content .card p {
            padding: 15px 20px;
            margin: 0;
        }
        .index-content .card p {
            padding: 0 20px 15px;
            margin: 0;
        }
    }

    .margin_bottom{
        margin-bottom:10px;
    }
    .row [class*="col-"]{ 
        padding-right: 5px;
        padding-left: 5px; 
    }
    .row { 
        margin-left: -5px; 
        margin-right: -5px; 
    }
    
    .card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}
.img-responsive {width:100%;}

<div class="container">
    <!--<h3>Grid 1</h3>-->
    <div class="row">
      <div class="col-sm-12">
          <div class="row">
              <div class="col-sm-6 margin_bottom">
                  <img src="http://placehold.it/600x410" alt="5" class="img-responsive"></img>
              </div>
              <div class="col-sm-6">
                  <div class="row">
                      <div class="col-sm-12 margin_bottom">
                          <img src="http://placehold.it/600x200" alt="5" class="img-responsive"></img>
                      </div>
                  </div>
                  <div class="row">
                      <div class="col-xs-6 col-sm-6">
                          <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
                      </div>
                      <div class="col-xs-6 col-sm-6">
                        <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!--<h3>Grid 2</h3>-->
  <div class="row">
      <div class="col-sm-4 margin_bottom">
          <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
      </div>
      <div class="col-sm-4">
          <div class="row">
              <div class="col-xs-6 col-sm-12 margin_bottom">
                  <img src="http://placehold.it/400x250" alt="5" class="img-responsive"></img>
              </div>
              <div class="col-xs-6 col-sm-12 margin_bottom">
                  <img src="http://placehold.it/400x250" alt="5" class="img-responsive"></img>
              </div>
          </div>
      </div>
      <div class="col-sm-4 margin_bottom">
          <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
      </div>
  </div>
  <!--<h3>Grid 3</h3>-->
  <div class="row">
    <div class="col-sm-3 margin_bottom">
        <img src="http://placehold.it/300x410" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-sm-6 margin_bottom">
        <img src="http://placehold.it/600x410" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-sm-3 margin_bottom">
        <div class="row">
            <div class="col-xs-6 col-sm-12 margin_bottom">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
            <div class=" col-xs-6 col-sm-12">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
        </div>
    </div>
  </div>
  <!--<h3>Grid 4</h3>-->
  <div class="row">
    <div class="col-sm-3 margin_bottom">
        <div class="row">
            <div class="col-xs-6 col-sm-12 margin_bottom">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
            <div class=" col-xs-6 col-sm-12">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
        </div>
    </div>
    <div class="col-sm-6 margin_bottom">
        <img src="http://placehold.it/600x410" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-sm-3 margin_bottom">
        <div class="row">
            <div class="col-xs-6 col-sm-12 margin_bottom">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
            <div class=" col-xs-6 col-sm-12 margin_bottom">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
        </div>
    </div>
  </div>
</div>

最佳答案

设置 .img-responsive { height: 100%; } 而不是 .img-responsive {width:100%; }。请检查下面的工作示例。希望对您有所帮助:)

并根据建议在较小的屏幕上设置宽度:@media (max-width: 768px) { .img-responsive { width: 100%; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<style>
/* Card and Button */
body {
  background-color: #f5f5f5;
}
div {
  background-color: #fff;
}
.index-content a:hover {
  color: black;
  text-decoration: none;
}
.index-content .row {
  margin-top: 20px;
}
.index-content a {
  color: black;
}
.index-content .card {
  background-color: #FFFFFF;
  padding: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
  color: black;
}
.index-content .card img {
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  height: 350px;
}
.index-content .card h4 {
  margin: 20px;
}
.index-content .card p {
  margin: 20px;
  opacity: 0.65;
}
.index-content .blue-button {
  width: 100px;
  -webkit-transition: background-color 1s, color 1s;
  /* For Safari 3.1 to 6.0 */
  transition: background-color 0.5s, color 0.5s;
  min-height: 20px;
  background-color: #002E5B;
  color: #ffffff;
  border-radius: 4px;
  text-align: center;
  font-weight: lighter;
  margin: 0px 20px 15px 20px;
  padding: 5px 0px;
  display: inline-block;
}
.index-content .blue-button:hover {
  background-color: #dadada;
  color: #002E5B;
}


/* GRID ELEMENTS MEDIA QUERIES */
@media (min-width: 768px) {
  .card {
    position: relative;
  }
  .card-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .card-content h4,
  .card-content p {
    color: white;
    width: 100%;
    float: left;
    margin: 0 0 5px;
  }
  .card-content a {
    float: right;
  }
  .index-content .card h4,
  .index-content .card p {
    padding: 15px 20px;
    margin: 0;
  }
  .index-content .card p {
    padding: 0 20px 15px;
    margin: 0;
  }
}
.margin_bottom {
  margin-bottom: 10px;
}
.row [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}
.row {
  margin-left: -5px;
  margin-right: -5px;
}
.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}
.img-responsive {
  height: 100%;
}
@media (max-width: 768px) {
  .img-responsive {
    width: 100%;
  }
}
</style>


<div class="container">
  <!--<h3>Grid 1</h3>-->
  <div class="row">
    <div class="col-sm-12">
      <div class="row">
        <div class="col-sm-6 margin_bottom">
          <img src="http://placehold.it/600x410" alt="5" class="img-responsive" />
        </div>
        <div class="col-sm-6">
          <div class="row">
            <div class="col-sm-12 margin_bottom">
              <img src="http://placehold.it/600x200" alt="5" class="img-responsive" />
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 col-sm-6">
              <img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
            </div>
            <div class="col-xs-6 col-sm-6">
              <img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--<h3>Grid 2</h3>-->
  <div class="row">
    <div class="col-sm-4 margin_bottom">
      <img src="http://placehold.it/400x510" alt="5" class="img-responsive" />
    </div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12 margin_bottom">
          <img src="http://placehold.it/400x250" alt="5" class="img-responsive" />
        </div>
        <div class="col-xs-6 col-sm-12 margin_bottom">
          <img src="http://placehold.it/400x250" alt="5" class="img-responsive" />
        </div>
      </div>
    </div>
    <div class="col-sm-4 margin_bottom">
      <img src="http://placehold.it/400x510" alt="5" class="img-responsive" />
    </div>
  </div>
  <!--<h3>Grid 3</h3>-->
  <div class="row">
    <div class="col-sm-3 margin_bottom">
      <img src="http://placehold.it/300x410" alt="5" class="img-responsive" />
    </div>
    <div class="col-sm-6 margin_bottom">
      <img src="http://placehold.it/600x410" alt="5" class="img-responsive" />
    </div>
    <div class="col-sm-3 margin_bottom">
      <div class="row">
        <div class="col-xs-6 col-sm-12 margin_bottom">
          <img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
        </div>
        <div class=" col-xs-6 col-sm-12">
          <img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
        </div>
      </div>
    </div>
  </div>
  <!--<h3>Grid 4</h3>-->
  <div class="row">
    <div class="col-sm-3 margin_bottom">
      <div class="row">
        <div class="col-xs-6 col-sm-12 margin_bottom">
          <img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
        </div>
        <div class=" col-xs-6 col-sm-12">
          <img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
        </div>
      </div>
    </div>
    <div class="col-sm-6 margin_bottom">
      <img src="http://placehold.it/600x410" alt="5" class="img-responsive" />
    </div>
    <div class="col-sm-3 margin_bottom">
      <div class="row">
        <div class="col-xs-6 col-sm-12 margin_bottom">
          <img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
        </div>
        <div class=" col-xs-6 col-sm-12 margin_bottom">
          <img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
        </div>
      </div>
    </div>
  </div>
</div>

关于html - 专栏没有 margin ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51398890/

文章推荐： c - 跳转到 ARM 上的 Naked 函数

文章推荐： java - selenium 未找到 chromedriver.exe

文章推荐： python - 分配前引用的列表理解变量

文章推荐： java - Spring:当 Web 应用程序启动和停止时更新 DB 表条目

html - CSS 专栏
我需要使用 CSS 创建列。我有很多数据(名称)，我需要将其分为 3 列(就像在 Word 中一样)。我不是在考虑表格，我需要列的内容是动态的。像这样 John Smith | John Smith
html - Bootstrap CSS 专栏
我正在为一个页面开发一个快速 UI，但我仍处于早期阶段。有一件事我正在尝试做，但不太明白。在所附的屏幕截图中，我想要一个全高的列，其背景颜色为纯色，从 HR 到左侧的 footer。我用页面的基
html - 响应式 CSS 专栏
我正在尝试创建一个两列布局。主要内容列包含博客卡片，我试图放置在右上角的第二列包含。 This是博客名片。我正在使用的 Bootstrap 布局:
python - Pandas 专栏: applying a function
我有一个 pandas 数据框 df df: GROUP VALUE 1 5 2 2 1 10 2 20 1 7 我正在尝试在其中一列上应用以下函数
php - Twitter Bootstrap 3.0 专栏
我使用 Twitter Boostrap 3 作为我前端的基础，但我在使用网格列时遇到了一个问题，我不确定如何解决。我正在使用 PHP 中的循环打印出一个提要，并为每个提要回显:
html - Bootstrap Col vs Webkit 专栏
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this q
python - pandas nlargest lost one 专栏
我有这个数据集: Id query count 001 abc 20 001 bcd 30 001 ccd 100 002 ace 13 002 ahhd 30
html - Wordpress 重力 PDF CSS 专栏
我正在尝试为我的 WordPress Gravity 表单 PDF 设置样式，但我似乎无法摆脱两列之间的空白。没有真正的方法来检查 PDF 上的元素，因此更改它的 CSS 并不容易。我尝试输出实际的
CSS 3 专栏——试图理解 IE6 错误修复
我正在阅读一个 CSS 技术，它有很好的文档记录 here . 它展示了如何创建带有两个固定宽度侧边栏的流畅中央列。我很清楚这项技术是如何工作的，但我不确定这是哪个问题/错误CSS 部分正在尝试修复
Node.js、sequelize 和 Unknown 专栏
我读过这个类似的问题: Sequelize Unknown column '*.createdAt' in 'field list' 但解决方案对我不起作用!为什么？这是我的代码: var User
asp.net-mvc - MVC 3 Webgrid 专栏
我目前正在开发 MVC 3 网络网格，在我希望有一个按钮的列之一中，当我将以下代码放入 View 中时，我已经实现了这一点。 @grid.GetHtml(columns: gr
python - 我有一个带有列表的 Pandas 专栏。对包含同一列中至少一个公共(public)元素的行进行分组
我有 1 列带列表的 pandas df。我想将至少有一个共同元素的所有列表分组。 Input Df : > Category 0 [IAB19, IAB81, IAB82] 1 [I
postgresql - 使用 Postgres 的 Golang UPDATE 专栏
假设我有一个表 employments 和一个结构 Employment type Employment struct { ID int `json:"id"
php - Laravel 5.2 migration comment on migration 专栏
我正在使用 laravel 5.2 开发一个项目。我有一个问题，我创建了一个迁移文件来更改列的评论。但是根据文档，它说在添加列时使用“列修饰符”。所以我不知道如何更新现有专栏的评论，有人可以帮助我吗？
ruby-on-rails - 使用 Ruby 阅读 PostgreSQL Bytea 专栏
我正在尝试使用 Ruby 从 PostgreSQL 读取 bytea 列。问题是它返回 bytea 值的十六进制编码字符串。我希望它返回的结果与我使用 File.read() 打开内容相同的二进制文件
http - fiddler HTTPMethod (GET/PUT/POST/DELETE...) 专栏
有没有一种简单的方法可以将 HTTPMethod (GET/PUT/POST/DELETE...) 列添加到 fiddler 显示？在 fiddler wiki 上找到这些说明用于添加 sessio
ruby-on-rails - Rails 行为不当 wrt Postgres SERIAL NOT NULL 专栏
我正在开发一个(当前)带有 PostgreSQL 8.4 数据库后端的 Rails 2.3.x 应用程序。在我的 Rails 应用程序中，我有一个对应于数据库表的模型，该表具有两列数据类型 SERIA
extjs - Grid Widget 专栏 - 关于 widget 变化，如何更新 grid store
我需要在网格列中显示组合框和日期字段。因此使用了 widgetcolumn 并使用这些字段创建了网格。但是现在在更改组合框或日期字段中的数据时，新值应该在网格存储中更新，以便在转到下一页并返回后，值
php - 找不到 Doctrine 专栏 : 1054 Unknown column 's.features' in 'field list' '
我在站点表中添加了一个新列“features”，并使用 Doctrine 重新生成了模型。此代码导致错误: $siteTable = Doctrine_Core::getTable("Site")

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 专栏没有 margin