如何在div中对齐内容

Question

如何正确对齐内容以适合边框内。如果您看到附加的图像，则内容在左侧有一点空间。我尝试删除container类，使用margin和padding进行了很多游戏，但没有任何效果。看起来我没有以适当的方式应用css（bootstrap），并且缩放上的导航栏也没有响应。

我不确定是什么推动内容正确。我该如何解决这个问题？

在这里创建了plunker：https://plnkr.co/edit/iOMp9w4LjIknj11UkFwz?p=preview

Answer 1

您可以使用.container-fluid代替.container。同样在.container-fluid内使用.navbar-nav，并考虑删除其填充：

.navbar .container-fluid {
    padding: 0;
}

一个完整的例子：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3">
            <div class="title"><strong>Title</strong>
                <br/>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li ui-sref-active="active" class="active"><a ui-sref="phone"><i class="fa fa-phone-square" aria-hidden="true"></i></a></li>
                <li style="border-right: #B2B9BA 1px solid;" ui-sref-active="active" class="active"><a ui-sref="message"><i class="fa fa-commenting-o" aria-hidden="true"></i></a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li ui-sref-active="active" class="active"><a ui-sref="dialpad"><i class="fa fa-th-large" aria-hidden="true"></i></a></li>
                <li ui-sref-active="active" class="active"><a ui-sref="dialpad2"><i class="fa fa-stop" aria-hidden="true"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

我的plunker

Answer 2

在header.html的代码中添加了类右拉，只需删除它，它就有float:right !important

<ul class="nav navbar-nav pull-right">