Bootstrap 4 和用户详细信息-如何做 "bootstrap" 或正确的方法？

Question

我正在使用 bootstrap 4 alpha 进行布局（顺便说一句，真的很喜欢卡片功能）。

所以，我在布局中有这个区域，我希望 phone 和电子邮件信息放在同一行。我不是 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>

我想要实现的是这个（见下图）

Answer 1

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

也许这对您有用。只需重新调整视口的大小，它就会成为响应式的一行，您可以根据需要进行调整。我正在使用 row 和 col-*-* 因为使用 row 和 col-*-* 是可能的，否则你需要自定义 css

Bootstrap 4 和用户详细信息-如何做 "bootstrap" 或正确的方法？

Bootstrap 4 and user details - how to do the "bootstrap" or correct way?

html

css

layout

sass

bootstrap-4