将文本与对齐选项卡底部对齐是通过使用Bootstrap 3.3.6中的CSS类来实现的。可以使用以下步骤来实现此效果:
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#profile">Profile</a></li>
<li><a data-toggle="tab" href="#messages">Messages</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>Home</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="profile" class="tab-pane fade">
<h3>Profile</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="messages" class="tab-pane fade">
<h3>Messages</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
.tab-content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
height: 100%;
}
这段CSS代码将.tab-content
元素的显示方式设置为flex布局,并将其子元素垂直对齐到底部。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
这样就可以使用Bootstrap提供的样式和功能。
这样,文本与对齐选项卡底部对齐的效果就实现了。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云