1

我有一个小问题。我添加了一个底部导航栏，其中包含 3 个社交图​​标和一个文本来展示这些图标是什么。截屏

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

就像图标真的在中间。

<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>

4

1 回答 1

0

首先，我应该评论说我在您的“问题”中没有看到任何问号。为了将来的读者，我会敦促您编辑您的问题以使其更加清晰。无论如何，我想我知道你在问什么（图片确实有帮助）。答案是，你需要 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/

于 2014-12-30T23:31:11.370 回答