html - Bootstrap - 将元素 B 置于元素 A 下方

Question

现在我很困惑，我正试图将社交图标放在同一个 Bootstrap 行中的 h3 标签下面，但是做这件事却做了一场噩梦。

我正在尝试创造这种效果:

但是，当它们位于同一行时，我似乎无法将这些图标放在电话号码元素下方，它们只是位于同一行。

Logo 也与电话号码元素位于同一行，因此如果我创建另一行并将图标放在该行中，它们将显示在页面的最下方。

这是我的代码示例:

HTML

      <div class="container hidden-sm hidden-xs">
        <div class="row">
        <div class="brand col-md-6 col-sm-6"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
        <div class="phone-div col-md-6 col-sm-6">
        <h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i> 01429 7654287</h3>
        <img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon">
        </div>
        </div>
      </div>

CSS

.phone-number {
    color: #fff;
    margin-top: 20px;
    display: inline-block;
    font: 600 2em 'Open Sans', sans-serif;
    float: right;
}

.facebook-icon {
    display: block;
    height: 30px;
    float: right;
}

/* main logo */

.logo-custom {
    height: 75px;
}

@media only screen and (max-width : 1199px) {
    .logo-custom {
    height: 61px;
    }


}

关于我可以做些什么来创造这种效果有什么建议吗？

谢谢，尼克 :)

Answer 1

试试这个代码:

      <div class="container hidden-sm hidden-xs">
        <div class="row">
        <div class="brand col-md-6 col-sm-6"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
        <div class="phone-div col-md-6 col-sm-6">
            <div class="col-md-12 col-sm-12">
                <h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i>01429 7654287</h3>
            </div>
            <div class="col-md-12 col-sm-12">
                <img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon">
            </div>
        </div>
        </div>
      </div>

希望这可能有用