Bootstrap中一行中所有列的高度相同
Posted
技术标签:
【中文标题】Bootstrap中一行中所有列的高度相同【英文标题】：Same height on all columns in a row in Bootstrap 【发布时间】：2019-05-25 16:26:14 【问题描述】：我正在构建一个复杂的表格，但在响应能力方面存在一些问题，并且能够根据某一行中的内容量来对齐一行中的所有列以具有相同的高度。
由于移动响应尚未完成，请在整页（1100px +）中运行代码
这里是 JSFiddle：http://jsfiddle.net/fLr9th4y/2/ - 请参考表中的 #11 以查看示例。
代码如下：
.heading
background-color: #00C6D7;
.sub-heading
background-color: white;
border-bottom: 1px solid lightgray;
h4, h6
margin-bottom: 0px;
.container
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
.row > .col-md-12 > span
font-size: smaller;
.col-md-4 > .row
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
.col-md-3 > .row
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
.col-md-2
display: flex;
justify-content: center;
align-items: center;
.col-md-9
padding: 0px!important;
.bl
border-left: 1px solid lightgray;
.bb
border-bottom: 1px solid #00C6D7;
.bg-white
background-color: white;
.mainText
font-style: italic;
color: #00C6D7;
.bg-fhdark
background-color: #5E6A71;
.title
color: #A2AD00;
.blank
background: transparent!important;
.slick-prev, .slick-next
background: black!important;
.r1
color: black;
/* BootStrap 4 Classes */
.py-5
padding-bottom: 3rem!important;
padding-top: 3rem!important;
.py-2
padding-bottom: .5rem!important;
padding-top: .5rem!important;
.text-white
color: #fff!important;
.text-left
text-align: left!important;
.text-uppercase
text-transform: uppercase!important;
.font-weight-bold
font-weight: 700!important;
.small
font-size: 80%;
font-weight: 400;
.row
display: flex;
flex-wrap: wrap;
.row-11
height: auto!important;
/* ----- */<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
</span>
</div>
<div class="col-md-2 col-md-2 text-center py-2 heading">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="row r1">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Client</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Integrated Strategy and Account Management</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Creativity and Innovation</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Talent</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Manage Full Talent LifeCycle</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Professional Development/Developing and Empowering</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Self-Leadership</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Business Development and Growth</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Strategy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Prospecting</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Pitch Preparation, Participation and Leadership</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Organic Growth</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Staffing and Resource Planning</span>
</div>
</div>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function()
$(".regular").slick(
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
);
);
</script>
</body>
</html>【问题讨论】：
【参考方案1】：只需重构您的 html。你有row 并且在里面你需要有你的专栏（如果我没看错的话，每个专栏都是col-md-3，但这并不那么重要）。你也可以使用 css-grid：https://css-tricks.com/snippets/css/complete-guide-grid/
【讨论】：
我必须保持这种方式才能让三列光滑轮播可悲地发挥作用。【参考方案2】：我相信你以错误的方式接近它。您应该基于行而不是列重构您的 HTML 结构，使其更容易响应。您应该自定义 slick 函数以使其工作而不是使用 CSS 工作
.heading
background-color: #00C6D7;
.sub-heading
background-color: white;
border-bottom: 1px solid lightgray;
h4, h6
margin-bottom: 0px;
.container
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
.row > .col-md-12 > span
font-size: smaller;
.col-md-4 > .row
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
.col-md-3 > .row
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
.col-md-2
display: flex;
justify-content: center;
align-items: center;
.col-md-9
padding: 0px!important;
.bl
border-left: 1px solid lightgray;
.bb
border-bottom: 1px solid #00C6D7;
.bg-white
background-color: white;
.mainText
font-style: italic;
color: #00C6D7;
.bg-fhdark
background-color: #5E6A71;
.title
color: #A2AD00;
.blank
background: transparent!important;
.slick-prev, .slick-next
background: black!important;
.r1
color: black;
/* BootStrap 4 Classes */
.py-5
padding-bottom: 3rem!important;
padding-top: 3rem!important;
.py-2
padding-bottom: .5rem!important;
padding-top: .5rem!important;
.text-white
color: #fff!important;
.text-left
text-align: left!important;
.text-uppercase
text-transform: uppercase!important;
.font-weight-bold
font-weight: 700!important;
.small
font-size: 80%;
font-weight: 400;
.row
display: flex;
flex-wrap: wrap;
.row-11
height: auto!important;
/* ----- */<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row bg-fhdark">
<div class="col-sm-4 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row bb">
<div class="col-sm-4">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST
TEST TEST</span>
</div>
<div class="col-sm-4 bl">11</div>
<div class="col-sm-4 bl">12</div>
</div>
<div class="row bb">
<div class="col-sm-4">
<span>Staffing and Resource Planning</span>
</div>
<div class="col-sm-4 bl">12</div>
<div class="col-sm-4 bl">12</div>
</div>【讨论】：
这很容易，但我使用光滑的轮播来控制其他三列@Hai，这就是我走这条路的原因。 @SaintLouisEvents 是的，这就是为什么我说你应该自定义光滑的轮播功能而不是使用 CSS 来工作。例如，您可以将每行中的 3 列包装到.wrapper 类中，并使用 asNavFor 属性使其滑动，看看这里：jsfiddle.net/rk0tuoy7/2
哇！你可能刚刚救了我海！感谢您的反馈，我会投票赞成这个只是为了慷慨的帮助。
@SaintLouisEvents 是的，谢谢。在您解决问题之前，我期待听到其他反馈。以上是关于Bootstrap中一行中所有列的高度相同的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 3 Grid如何使嵌套列的高度与最大的列相同