你们能帮我弄清楚为什么，当我使用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/