我正在努力解決使兩根柱子高度相同的問題。當(dāng)文本不夠長時(shí)，兩列仍然具有相同的高度。但除此之外，<div>自動(dòng)調(diào)整自身大小，使它們具有不同的高度。我嘗試過使用溢出自動(dòng)，但它不起作用。這是我的工作的小提琴。 https://jsfiddle.net/kcaxy5Lh/1/
1 回答
料青山看我應(yīng)如是
TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超8個(gè)贊
Bootstrap 建立高度的方式很奇怪，他們flex-wrap:wrap在類上有.row防止溢出發(fā)生的方法。
我們需要?jiǎng)h除它并更改布局，flex-direction:column然后向下傳播高度。
.info-tab {
color: #BBB;
}
.comment {
text-align: right;
}
.btn:focus {
outline: none;
}
/* Comment section */
.comment-wrapper .media-list .media {
border-bottom: 1px dashed #efefef;
margin-bottom: 25px;
}
.user_name {
font-size: 14px;
font-weight: bold;
}
.comments-list .media {
border-bottom: 1px dotted #ccc;
}
.title {
font-size: 14px;
font-weight: bold;
}
.komen {
font-size: 14px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/* NEW */
#myTabContent,
#profile {
height: 100%;
}
#profile>div {
flex-wrap: nowrap;
flex-direction: column;
height: 100%;
}
#infoTab>div {
overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="bg-dark">
<div class="container-fluid bg-dark">
<div class="row px-3">
<div class="col-xs-12 col-md-8 mt-5 embed-responsive embed-responsive-16by9 h-100" id="player">
<iframe src="https://www.youtube.com/embed/2lAe1cqCOXo&t" width="640" height="480"></iframe>
</div>
<div class="col-xs-6 col-md-4 mt-5" id="infoTab">
<div class="h-100 ml-2" style="border: 1px solid #555;">
<div class="mx-3 h-100">
<!-- Navication episode/comments -->
<ul class="nav nav-tabs nav-fill py-3" id="myTab" role="tablist">
<li class="nav-item text-right mx-2">
<a class="info-tab btn comment" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="comment" aria-selected="false">Comments</a>
</li>
</ul>
<br>
<!-- Navication Content -->
<div class="tab-content mx-1 container overflow-auto" id="myTabContent">
<div class="tab-pane fade show active text-white f-right overflow-auto container" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<!-- COMMENTs | https://bootsnipp.com/snippets/M5obX -->
<div class="row py-1 overflow-auto">
<div class="col media p-0">
<div class="form-inline roundBorder mr-3">
<i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
</div>
<div class="media-body">
<h4 class="media-heading title text-primary">Fahmi Arif</h4>
<p class="komen">
kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
<br>
</p>
</div>
</div>
<div class="w-100"></div>
<div class="col media p-0">
<div class="form-inline roundBorder mr-3">
<i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
</div>
<div class="media-body">
<h4 class="media-heading title text-primary">Fahmi Arif</h4>
<p class="komen">
kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
<br>
</p>
</div>
</div>
<div class="w-100"></div>
<div class="col media p-0">
<div class="form-inline roundBorder mr-3">
<i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
</div>
<div class="media-body">
<h4 class="media-heading title text-primary">Fahmi Arif</h4>
<p class="komen">
kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
<br>
</p>
</div>
</div>
<div class="w-100"></div>
<div class="col media p-0">
<div class="form-inline roundBorder mr-3">
<i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
</div>
<div class="media-body">
<h4 class="media-heading title text-primary">Fahmi Arif</h4>
<p class="komen">
kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
<br>
</p>
</div>
</div>
<div class="w-100"></div>
<div class="col media p-0">
<div class="form-inline roundBorder mr-3">
<i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
</div>
<div class="media-body">
<h4 class="media-heading title text-primary">Fahmi Arif</h4>
<p class="komen">
kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
<br>
</p>
</div>
</div>
<div class="w-100"></div>
</div>
<!-- END COMMENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
- 1 回答
- 0 關(guān)注
- 105 瀏覽
添加回答
舉報(bào)
0/150
提交
取消