Question

下面是我的代码，我想在navbar-nav的中间和中心对齐文本框。我试过应用这个，但文本框仍然无法对齐center.any想法为什么？

    <div class="row" style="border-bottom: 1px solid #ffffff;">
        <div class="col-md-12">
            <ul class="nav navbar-nav navbar-left">
                <img src="Images/care2.jpg" title="careplus" />
                <font style="color: white; font-weight: bold; font-family: Candara; font-size: x-large; vertical-align: bottom">Company Name</font>
            </ul>
            <ul class="nav navbar-nav navbar-center" style="text-align: center">
                <asp:TextBox ID="search" runat="server"></asp:TextBox>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <asp:LinkButton ID="lnkCurrentUser" runat="server" Style="padding-bottom: 10px; padding-top: 10px;" OnClick="lnkCurrentUser_Click"></asp:LinkButton>
                    <asp:LinkButton ID="lnkCurrentUser1" runat="server" Style="padding-bottom: 10px; padding-top: 10px" OnClick="lnkCurrentUser1_Click"></asp:LinkButton>
                </li>
                <li>
                    <asp:LinkButton ID="lnkLogout" runat="server" Style="padding-bottom: 10px; padding-top: 10px;" OnClick="lnkLogout_Click"><i class="glyphicon glyphicon-lock"></i> Logout</asp:LinkButton>
                </li>
            </ul>
        </div>
    </div>

我的预期输出：

我目前的输出：

Answer 1

对所有UL使用bootstrap响应类col-xs-4

<div class="row">
    <ul class="col-xs-4 nav navbar-nav navbar-left">
        <img src="Images/care2.jpg" title="careplus" />
        <font style="color: white; font-weight: bold; font-family: Candara; font-size: x-large; vertical-align: bottom">Company Name</font>
    </ul>
    <ul class="col-xs-4 nav navbar-nav navbar-center" style="text-align: center">
        <asp:TextBox ID="search" runat="server"></asp:TextBox>
    </ul>
    <ul class="col-xs-4 nav navbar-nav navbar-right">
        <li>
            <asp:LinkButton ID="lnkCurrentUser" runat="server" Style="padding-bottom: 10px; padding-top: 10px;" OnClick="lnkCurrentUser_Click"></asp:LinkButton>
            <asp:LinkButton ID="lnkCurrentUser1" runat="server" Style="padding-bottom: 10px; padding-top: 10px" OnClick="lnkCurrentUser1_Click"></asp:LinkButton>
        </li>
        <li>
            <asp:LinkButton ID="lnkLogout" runat="server" Style="padding-bottom: 10px; padding-top: 10px;" OnClick="lnkLogout_Click"><i class="glyphicon glyphicon-lock"></i> Logout</asp:LinkButton>
        </li>
    </ul>
</div>

Answer 2

使用bootstrap navbar

<nav class="navbar navbar-default" role="navigation">

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="pull-left"><a href="#">Dashboard</a></li>
    <li class="active"><a href="#">Stories</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li class="social pull-right"><a> <input type="text" name="firstname"></a></li>
  </ul>

</div><!-- /.navbar-collapse -->

/* css*/

  .navbar-nav {
width: 100%;
text-align: center;
> li {
  float: none;
  display: inline-block;
}
}

html对齐navbar-nav的文本框中间

2 个答案: