Question

我有一个小问题。我添加了一个底部导航栏，其中包含3个社交图标和一个文本，以显示这些图标。 Screenshot

我想把这个文本放在右边或左边，但不是这样的。如果我在另一边做同样的事情。

就像那个图标真的在中间。

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <p class="navbar-text navbar-right text-right">Suivre l'IUT de Lens</p>
        <div class="social">
            <ul>
                <li><a href="URL"><i class="fa fa-lg fa-facebook"></i></a></li>
                <li><a href="URL"><i class="fa fa-lg fa-twitter"></i></a></li>
                <li><a href="URL"><i class="fa fa-lg fa-google-plus"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

首先，我应该评论我在你的问题中没有看到任何问号。＆＃34;我敦促你编辑你的问题，以便将来的读者更清楚。清酒。无论如何，我想我知道你在问什么（图片确实有帮助）。答案是，你需要CSS！

有多种方法可以完成您想要的间距和位置。这是一个：

HTML （我删除了一些似乎无关紧要的内容）：

<nav>
<p style="width:100%"> 
    <div class="linktext">
        Suivre l'IUT de Lens
    </div>
    <div class="linkgroup">
        <a href="URL"><i class="link fa fa-lg fa-facebook"></i></a>
        <a href="URL"><i class="link fa fa-lg fa-twitter"></i></a>
        <a href="URL"><i class="link fa fa-lg fa-google-plus"></i></a>
    </div>
</p>

<强> CSS：

.link {
    padding-right: 10px
}
.linkgroup{
    padding-right:20px;
    float:right;
}
.linktext {
    padding-right:20px;
    float: right;
}

因此，您只需要在CSS中定义属性，然后将相关的CSS类分配给<div>/<p>/<whatever>

这是一个JSFiddle：http://jsfiddle.net/af8rpc99/

底部导航栏的图像/链接对齐问题

1 个答案: