[英]Bootstrap 5 column not working as expected with my design :(
Working on bootstrap where I need to develop my footer exactly as below 在Bootstrap上工作,我需要完全按照以下步骤开发页脚
Here is my part of HTML code 这是我的HTML代码部分
<footer class="footer">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 footer-Darkerblue">
<div class="text-center">
<ul class="footer-ul">
<li class="footer-headtext text-uppercase">
destination
</li>
<li class="footer-Kilomet">
6.8 Kms
</li>
<li class="footer-min">
25 Min away
</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 footer-Darkenblue">
<ul class="footer-ul">
<li>
Status
</li>
<li>
In Transit
</li>
</ul>
</div>
Here is the fiddle link 这是小提琴链接
Kindly please guide me where i am getting wrong i am not getting the exact output 请指导我哪里我错了我没有得到确切的输出
Ok, took a look at your code, and saw that you had a few closing tags out of place. 好的,看一下您的代码,发现您有几个结束标记不合适。
You had: 你有过:
<div class="footer-left-border"></div>
Simply move the closing tag to below your data. 只需将结束标记移动到数据下方。
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="footer-left-border">
<ul class="footer-ul">
<li class="footer-headtext text-uppercase">
DATE
</li>
</ul>
<ul class="footer-ul list-inline footer-text-date">
<li>
<em class="fa fa-calendar"></em> 25 Dec, 2015
</li>
<li>
<em class="fa fa-clock-o"></em> 16:30
</li>
</ul>
</div>
</div>
Here's a JSFiddle Fork of your code, showing this. 这是您的代码的JSFiddle分叉 ,显示了这一点。
Enjoy! 请享用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.