我正在使用bootstrap 4 alpha(确实像卡片功能btw)进行布局。
因此,我在布局中有此区域,希望将电话和电子邮件信息放在同一行上。我不是CSS专家,并且几乎不了解危险。因此,我不确定如何实现我所追求的效果并正确执行。任何提示或建议,不胜感激。
这是我目前拥有的代码:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/avatars/adelle.jpg" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<span class="favorite"><a href="#"><i class="fa fa-star"></i></a></span>
<h6 class="media-heading">Jacqueline Perry</h6>
<span class="company">Domino Technologies</span>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<ul class="details">
<li class="phone"><i class="fa fa-mobile fa-lg fa-lg"></i> (123) 786-4533 </li>
<li class="email"><a href="#"><i class="fa fa-paper-plane-o"></i> jacqueline.perry@smithcorporation.com</a></li>
<li class="address"><i class="fa fa-map-marker"></i> 338 West 23rd Street New York, NY 10011, USA </li>
</ul>
</div>
</div> <!-- ./row -->
</div>
</div>
我要实现的目标是(请参见下图)
最佳答案
http://jsfiddle.net/hamzanisar/d1mdm2tk/3
也许这对您有用。只需调整查看端口的大小,它将是一行,您可以根据需要进行调整。我正在使用row
和col-*-*
,因为使用row
和col-*-*
可能,否则您需要制作自定义CSS
关于html - Bootstrap 4和用户详细信息-如何做“Bootstrap”或正确的方法?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35742837/