html - Bootstrap 3 中 3 列高度相同的 1 像素失真-6ren

html - Bootstrap 3 中 3 列高度相同的 1 像素失真

转载作者：行者123 更新时间：2023-11-28 06:15:05

你们能帮我弄清楚为什么，当我应用 display:table 来制作相同高度的列时，我的行缩小了 1px(与我的其他容器相比)，如附图所示？当我的@media 指令触发时，我的主要内容似乎被调整了大小。

我正在使用 Bootstrap 3.6 和标准 html/css 并在 Google Chrome 上进行测试。这是代码:

CSS

body {
  font-family: 'Open Sans', Arial, sans-serif;
}

header, footer {
  background-color: #333;
  color: #ddd;
  padding: 20px;
  text-align: center;
}

section {
  color: #222;
  padding: 20px;
}

aside {
  background-color: #F7F7F7;
  text-align: center;
  padding-top: 20px;
}

article {
  padding: 10px 20px 10px 40px;
}

.menu {
  padding-bottom: 40px;
  padding-top: 20px;
}

.menu h4 {
  margin-bottom: 40px;
  color: darkorange;
  font-weight: bold;
}

.bannerside {
  background-color: #333;
  padding-bottom: 40px;
}

.bannerside a {
  color:#FFF;
}

.bannerside-top div {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bannerside-top a {
  margin-left: 30px;
  margin-right: 30px;
  display: inline-block;
}

.btn-cst {
  border: 1px solid #888;
  text-align: center;
  font-weight: bold;
  color: #FFF;
}

.btn-rect-30-wide {
  width: 90px;
  height: 30px;
  line-height: 30px;
}

.btn-rect-60 {
  width: 90px;
  height: 60px;
  line-height: 60px;
}

.btn-sqr-60 {
  width: 60px;
  height: 60px;
  line-height: 60px;
}

.photo {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: bold;
  color: #FFF;
  background-color: #7A9;
  box-shadow: 6px 6px 8px #777;
  margin-bottom: 20px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.navy {
  background: navy;
}

.orange {
  background: orange;
}

.pink {
  background: pink;
}

@media (max-width:767px) {
  .menu h4 {
    display: inline;
  }
  .menu a {
    display: block;
  }
  .menu .btn-cst {
    width: 33%;
    height: 33%;
    margin-right: 10px;
    margin-bottom: 30px;

  }

}

/* 3 col same height fix */
@media (min-width:768px) {
  .container-sm-height {
    display: table;
    padding-left: 0px;
    padding-right: 0px;
  }
  .row-sm-height {
    display: table-row;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
  }
}


**HTML**

   <!DOCTYPE html>
<html>
   <head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href="bootstrap.min.css" rel="stylesheet">
  <link href='app.css' rel='stylesheet'>
   </head>
   <body>
  <header class="container-fluid ">HEADER</header>
  <div class="row">
     <div class="bannerside bannerside-top visible-md ">
        <div>
           <a href="">
              <input type="button" class="btn-cst btn-sqr-60 pink" value="AD1">
              <h6>
                 Advertisment Link 1
              </h6>
           </a>
           <a href="">
              <input type="button" class="btn-cst btn-sqr-60 red" value="AD2">
              <h6>
                 Advertisment Link 2
              </h6>
           </a>
           <a href="">
              <input type="button" class="btn-cst btn-sqr-60 navy" value="AD3">
              <h6>
                 Advertisment Link 3
              </h6>
           </a>
           <a href="">
              <input type="button" class="btn-cst btn-sqr-60 green" value="AD4">
              <h6>
                 Advertisment Link 4
              </h6>
           </a>
           <a href="">
              <input type="button" class="btn-cst btn-sqr-60 orange" value="AD5">
              <h6>
                 Advertisment Link 5
              </h6>
           </a>
        </div>
     </div>
  </div>
  <div class="container-fluid container-sm-height">
     <div class="row row-sm-height">
        <section class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2 col-sm-height">
           <article>
              <h2>
                 Title 1
              </h2>
              <div class="photo">
                 <br /><br />
                 GFX 1<br />
                 <br /><br />
              </div>
              <div class="row">
                 <p class="col-sm-9 col-md-10">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
                 </p>
                 <p class="col-sm-3 col-md-2">
                    <input type="button" class="btn-cst btn-rect-30-wide red" value="more..." />
                 </p>
              </div>
           </article>
           <article>
              <h2>
                 Title 2
              </h2>
              <div class="photo">
                 <br /><br />
                 GFX 1<br />
                 <br /><br />
              </div>
              <div class="row">
                 <p class="col-sm-9 col-md-10">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
                 </p>
                 <p class="col-sm-3 col-md-2">
                    <input type="button" class="btn-cst btn-rect-30-wide red" value="more..." />
                 </p>
              </div>
           </article>
           <article>
              <h2>
                 Really big and annoying title 123456789
              </h2>
              <div class="photo">
                 <br /><br />
                 GFX 1<br />
                 <br /><br />
              </div>
              <div class="row">
                 <p class="col-sm-9 col-md-10">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
                 </p>
                 <p class="col-sm-3 col-md-2">
                    <input type="button" class="btn-cst btn-rect-30-wide red" value="more..." />
                 </p>
              </div>
           </article>
        </section>
        <aside class="col-sm-3 col-sm-pull-9 col-lg-2 col-lg-pull-8 col-sm-height">
           <h4>
              MENU ITEMS
           </h4>
           <div class="menu">
              <a href="">
                 <input type="button" class="btn-cst btn-rect-60 pink" value="LM1">
                 <h4>
                    Link Menu 1
                 </h4>
              </a>
              <a href="">
                 <input type="button" class="btn-cst btn-rect-60 orange" value="LM2">
                 <h4>
                    Link Menu 2
                 </h4>
              </a>
              <a href="">
                 <input type="button" class="btn-cst btn-rect-60 navy" value="LM3">
                 <h4>
                    Link Menu 3
                 </h4>
              </a>
              <a href="">
                 <input type="button" class="btn-cst btn-rect-60 green" value="LM4">
                 <h4>
                    Link Menu 4
                 </h4>
              </a>
              <a href="">
                 <input type="button" class="btn-cst btn-rect-60 blue" value="LM5">
                 <h4>
                    Link Menu 5
                 </h4>
              </a>
           </div>
        </aside>
        <aside class="col-xs-12 col-md-2 bannerside hidden-md col-sm-height">
           <div class="menu">
              <a href="">
                 <input type="button" class="btn-cst btn-sqr-60 pink" value="AD1">
                 <h6>
                    Advertisment Link 1
                 </h6>
              </a>
              <a href="">
                 <input type="button" class="btn-cst btn-sqr-60 red" value="AD2">
                 <h6>
                    Advertisment Link 2
                 </h6>
              </a>
              <a href="">
                 <input type="button" class="btn-cst btn-sqr-60 navy" value="AD3">
                 <h6>
                    Advertisment Link 3
                 </h6>
              </a>
              <a href="">
                 <input type="button" class="btn-cst btn-sqr-60 green" value="AD4">
                 <h6>
                    Advertisment Link 4
                 </h6>
              </a>
              <a href="">
                 <input type="button" class="btn-cst btn-sqr-60 orange" value="AD5">
                 <h6>
                    Advertisment Link 5
                 </h6>
              </a>
           </div>
        </aside>
     </div>
  </div>
  <footer class="container-fluid">FOOTER</footer>
   </body>
</html>

最佳答案

将样式类 .row-sm-height { display: table-row;} 更改为 .row-sm-height { display: table-cell;} .这是 demo

body {
  font-family: 'Open Sans', Arial, sans-serif;
}

header, footer {
  background-color: #333;
  color: #ddd;
  padding: 20px;
  text-align: center;
}

section {
  color: #222;
  padding: 20px;
}

aside {
  background-color: #F7F7F7;
  text-align: center;
  padding-top: 20px;
}

article {
  padding: 10px 20px 10px 40px;
}

.menu {
  padding-bottom: 40px;
  padding-top: 20px;
}

.menu h4 {
  margin-bottom: 40px;
  color: darkorange;
  font-weight: bold;
}

.bannerside {
  background-color: #333;
  padding-bottom: 40px;
}

.bannerside a {
  color:#FFF;
}

.bannerside-top div {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bannerside-top a {
  margin-left: 30px;
  margin-right: 30px;
  display: inline-block;
}

.btn-cst {
  border: 1px solid #888;
  text-align: center;
  font-weight: bold;
  color: #FFF;
}

.btn-rect-30-wide {
  width: 90px;
  height: 30px;
  line-height: 30px;
}

.btn-rect-60 {
  width: 90px;
  height: 60px;
  line-height: 60px;
}

.btn-sqr-60 {
  width: 60px;
  height: 60px;
  line-height: 60px;
}

.photo {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: bold;
  color: #FFF;
  background-color: #7A9;
  box-shadow: 6px 6px 8px #777;
  margin-bottom: 20px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.navy {
  background: navy;
}

.orange {
  background: orange;
}

.pink {
  background: pink;
}

@media (max-width:767px) {
  .menu h4 {
    display: inline;
  }
  .menu a {
    display: block;
  }
  .menu .btn-cst {
    width: 33%;
    height: 33%;
    margin-right: 10px;
    margin-bottom: 30px;

  }

}

/* 3 col same height fix */
@media (min-width:768px) {
  .container-sm-height {
    display: table;
    padding-left: 0px;
    padding-right: 0px;
  }
  .row-sm-height {
    display: table-cell;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href='app.css' rel='stylesheet'>
  </head>

  <body>

    <header class="container-fluid ">HEADER</header>

      <div class="row">
        <div class="bannerside bannerside-top visible-md ">
          <div>
             <a href="">
                <input type="button" class="btn-cst btn-sqr-60 pink" value="AD1">
                <h6>
                  Advertisment Link 1
                </h6>
              </a>
              <a href="">
                <input type="button" class="btn-cst btn-sqr-60 red" value="AD2">
                <h6>
                  Advertisment Link 2
                </h6>
              </a>
              <a href="">
                <input type="button" class="btn-cst btn-sqr-60 navy" value="AD3">
                <h6>
                  Advertisment Link 3
                </h6>
              </a>
              <a href="">
                <input type="button" class="btn-cst btn-sqr-60 green" value="AD4">
                <h6>
                  Advertisment Link 4
                </h6>
              </a>
              <a href="">
                <input type="button" class="btn-cst btn-sqr-60 orange" value="AD5">
                <h6>
                  Advertisment Link 5
                </h6>
              </a>
          </div>
        </div>
      </div>


    <div class="container-fluid container-sm-height">

      <div class="row row-sm-height">


        <section class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2 col-sm-height">
          <article>
            <h2>
              Title 1
            </h2>
            <div class="photo">
              <br /><br />
              GFX 1<br />
              <br /><br />
            </div>
            <div class="row">
              <p class="col-sm-9 col-md-10">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
              </p>
              <p class="col-sm-3 col-md-2">
                <input type="button" class="btn-cst btn-rect-30-wide red" value="more..." />
              </p>
            </div>
          </article>

          <article>
            <h2>
              Title 2
            </h2>
            <div class="photo">
              <br /><br />
              GFX 1<br />
              <br /><br />
            </div>
            <div class="row">
              <p class="col-sm-9 col-md-10">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
              </p>
              <p class="col-sm-3 col-md-2">
                <input type="button" class="btn-cst btn-rect-30-wide red" value="more..." />
              </p>
            </div>
          </article>

          <article>
            <h2>
              Really big and annoying title 123456789
            </h2>
            <div class="photo">
              <br /><br />
              GFX 1<br />
              <br /><br />
            </div>
            <div class="row">
              <p class="col-sm-9 col-md-10">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
              </p>
              <p class="col-sm-3 col-md-2">
                <input type="button" class="btn-cst btn-rect-30-wide red" value="more..." />
              </p>
            </div>
          </article>

        </section>



        <aside class="col-sm-3 col-sm-pull-9 col-lg-2 col-lg-pull-8 col-sm-height">
          <h4>
            MENU ITEMS
          </h4>
          <div class="menu">
            <a href="">
              <input type="button" class="btn-cst btn-rect-60 pink" value="LM1">
              <h4>
                Link Menu 1
              </h4>
            </a>
            <a href="">
              <input type="button" class="btn-cst btn-rect-60 orange" value="LM2">
              <h4>
              Link Menu 2
              </h4>
            </a>
            <a href="">
              <input type="button" class="btn-cst btn-rect-60 navy" value="LM3">
              <h4>
                Link Menu 3
              </h4>
            </a>
            <a href="">
              <input type="button" class="btn-cst btn-rect-60 green" value="LM4">
              <h4>
                Link Menu 4
              </h4>
            </a>
            <a href="">
              <input type="button" class="btn-cst btn-rect-60 blue" value="LM5">
              <h4>
                Link Menu 5
              </h4>
            </a>
          </div>
        </aside>



        <aside class="col-xs-12 col-md-2 bannerside hidden-md col-sm-height">
          <div class="menu">
            <a href="">
              <input type="button" class="btn-cst btn-sqr-60 pink" value="AD1">
              <h6>
                Advertisment Link 1
              </h6>
            </a>
            <a href="">
              <input type="button" class="btn-cst btn-sqr-60 red" value="AD2">
              <h6>
                Advertisment Link 2
              </h6>
            </a>
            <a href="">
              <input type="button" class="btn-cst btn-sqr-60 navy" value="AD3">
              <h6>
                Advertisment Link 3
              </h6>
            </a>
            <a href="">
              <input type="button" class="btn-cst btn-sqr-60 green" value="AD4">
              <h6>
                Advertisment Link 4
              </h6>
            </a>
            <a href="">
              <input type="button" class="btn-cst btn-sqr-60 orange" value="AD5">
              <h6>
                Advertisment Link 5
              </h6>
            </a>
          </div>
        </aside>
      </div>
    </div>
    <footer class="container-fluid">FOOTER</footer>

  </body>
</html>

关于html - Bootstrap 3 中 3 列高度相同的 1 像素失真，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35940087/

文章推荐： c++ - 是否跳过了非具体类的虚拟类的基构造函数？

文章推荐： C++ FANN fann_run 始终产生相同的输出

文章推荐： c++ - 英特尔线程构建 block ，std::shared_ptr 类型的 source_node

ios - AVAudioPlayer速率变化会引入失真/失真
我正在尝试更改通过AVAudioPlayer播放的声音文件的速率。它可以工作，但是有很多伪像，尤其是当我放慢速度时。我很高兴速率变化保持相同的音调，但是似乎有麻烦，尤其是持续的音符。直到我用均衡，压
android - 混合两个音频缓冲区时的咔嗒声/失真
我正在开发一个需要同步声音的安卓音频应用。我正在尝试合并两个声音缓冲器，但在大幅度时出现失真。这就是我正在做的: for(int i=0;i>8); } 缓冲区使用:
Android:录制的视频似乎*失真*
我正在尝试使用 MediaRecorder 从相机录制视频。这是一个代码 fragment 剪断.. mr.setAudioSource( MediaRecorder.AudioSource.MI
HTML5 Canvas 失真？
我想找点乐子看看 Canvas 。画一个盒子似乎很容易，所以我几乎从 mozilla 开发者网站上复制了一个例子。你可以在这里看到它:http://jsfiddle.net/Wolfy87/DZBwp
c - 应用透视矩阵时的 OpenGL 失真
我有一个程序，可以简单地绘制一个立方体。当应用旋转缩放等变换时，程序可以工作。当我尝试应用任何透视矩阵(例如透视、平截头体或正交)时，立方体会以未定义的方式变得非常扭曲。我感到困惑的是为什么该程序在使
html - 如何去除背景图像中的
失真
在 CSS 和 HTML 中，向下滚动时如何避免背景图像失真？我的代码大纲如下:HTML * { margin : 0; background-image : url("im
c++ - 旋转图像会导致 Qt 失真
我在 Qt 中旋转图像时遇到了一些问题。每次我用 QPainter 旋转我的图像它变得越来越扭曲。这是初始图像: 经过一些迭代后它变成: 这是我的代码: void Ship::Move(int x,
iphone - CGAffineTransformMakeRotation UILabel 失真
我正在尝试将 UILabel 旋转 45 度。我将 transform 属性设置为 CGAffineTransformMakeRotation(M_PI * 0.25) 但是当我这样做时，UILabe
ios - AudioKit 中的点击/失真
当我添加一堆 (20-40) 个样本同时播放和重叠时，有时它会开始失真，然后开始出现一些波动、振荡和咔哒声。当样本正在播放时应用程序崩溃时会发出类似的声音 - 听起来像是突然、嘎吱作响的停止。请注意
javascript - 我如何摆脱这种 amCharts 失真？
我想使用 amCharts Javascript 库显示我的用户排名。用户排名是这样的(很好，没问题): 问题是如果我有两个相同的配置文件名称(例如，如果我有两个 Sara 名称作为配置文件名称或什至
svg - TornadoFX 出现奇怪的 SVG 失真
在 TornadoFX 中使用 SVG 时遇到奇怪的问题。我有一些 SVG 字符串存储在一个枚举中，我在程序中用作背景图像。当我在在线查看器中查看完全相同的 SVG 路径时，没有失真并且显示正确: 但
java - 将增益应用于 PCM 时避免过度调制/失真
我使用录音机(Google Play 上的 AudioRec)。我可以选择adjust the gain with [-20dB, + 20dB]范围。它在我的手机上运行得很好，但用户使用连接到其
css - 导航栏对齐不良，移动 View 失真
Logo 、搜索栏、购物车、登录和注册未在同一行对齐。当我尝试查看移动 View 时，出现失真搜索栏和其他东西搞砸了在移动 View 中，点击菜单折叠按钮没有任何反应。这是我的代码:
c++ - OpenGL 视口(viewport)失真
我仍然是 OpenGL 的初学者。我正在尝试使用着色器在 1280 x 720 的屏幕上绘制一个完美的正方形。我使用的是 OpenGL 核心配置文件 3.3 版。当我试图在 1280 x 720 中
c# - Outlook 中的 UI 失真
我的应用程序生成的电子邮件在浏览器(示例 chrome)中打开时可以完美打开。但是当在 Microsoft Outlook 中打开同一封电子邮件时，它会严重变形(例如文本不可见，按钮文本被换行)。任何
c++ - 2D opengl旋转导致 Sprite 失真
我对使用 OpenGL ES 2.0 还很陌生。我也在使用 iPhone 和 GLM 数学库。正如我所提到的，我经常使用本教程:http://tomdalling.com/blog/modern-op
objective-c - iOS 图像处理(失真)
我最初是在考虑 CoreImage 的情况下解决这个问题的(因为我还需要进行面部识别)，但我意识到，不幸的是，CI 失真滤镜尚未包含在 iPhone 中。我试图深入研究 GLImageProcess
ruby-on-rails - 使用activeadmin后 View 失真，说翻译丢失
我已经使用 twitter-bootstrap gem 来制作商店应用程序。在我添加 activeadmin gem 之前它工作正常。 admin主页的 View 有一行: 店铺名称和 "trans
ios - 将它用于 UIImageView 时 UIImage 失真
我拍了一张照片，然后用这张照片初始化了一个 UIImageView 对象。唯一的问题是，当我拍照时，照片是使用完整的 iPhone 屏幕(纵向)拍摄的。使用这张照片初始化的 UIImageView
ios - AVAssetWriter 的输出(写入视频的 UIImages)失真
我正在使用 AVAssetWriter 将一系列图像编码为电影文件，遵循 Zoul 在这里的回答:How do I export UIImage array as a movie? . 简而言之我的流

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Bootstrap 3 中 3 列高度相同的 1 像素失真