Question

此刻我很困惑，我正试图将一个社交图标放在同一个引导行中的h3标签下面，但却做了一个噩梦。

我正在尝试创建此效果：

enter image description here

然而，当他们在同一行时，我似乎无法将这些图标放在电话号码元素下面，他们只是坐在同一行。

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

以下是我的代码示例：

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>

希望这可能有用

Answer 2

我认为你可能只是在你自己的脑海中过度复杂化了。忘记Bootstrap一分钟，如果你想制作一个有两个元素堆叠在另一个上面的页面，那么你一定要确保使用块元素（这意味着它们将占用100％的宽度）他们默认使用的容器。）

问题是您的自定义CSS实际上会覆盖此正常行为，因为您明确将电话号码设置为display: inline-block;并使两个元素都使用float:right。只需从你的CSS规则中删除那些，你就会得到你想要的效果：

.phone-number {
    color: #fff;
    margin-top: 20px;
    font: 600 2em sans-serif;
}

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

如果您希望项目与右侧对齐，只需将Bootstrap助手类：text-right添加到列div或将text-align: right添加到您的css规则中。

编辑：只是一个建议

此外，您可以简化标记。如果您希望整个容器隐藏在sm和xs设备上，那么您在col类中必须拥有的只有col-md-6。并且，如果您不希望您的容器隐藏在xs和sm断点处，那么您需要的只是col-sm-6，因为仅对于大于所有视口的所有视口，将其设置为50％ 767px。请记住，col类是附加的。当您添加col类时，它就像是说：“将此列的宽度设置为此视口大小，直到我告诉您”。

Bootstrap - 将元素B放置在元素A下面

2 个答案: