我正在使用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>


我要实现的目标是(请参见下图)

html - Bootstrap 4和用户详细信息-如何做“Bootstrap”或正确的方法?-LMLPHP

最佳答案

http://jsfiddle.net/hamzanisar/d1mdm2tk/3

也许这对您有用。只需调整查看端口的大小,它将是一行,您可以根据需要进行调整。我正在使用rowcol-*-*,因为使用rowcol-*-*可能,否则您需要制作自定义CSS

关于html - Bootstrap 4和用户详细信息-如何做“Bootstrap”或正确的方法?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35742837/

10-12 12:54
查看更多