Question

我使用Asp.net mvc和bootstrap，我尝试通过右拉和右浮动将搜索栏放在导航栏的右侧但是它不工作seacrh bar停留在左边的其他元素旁边导航。

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-inverse">
            <div style="">
                <div class="navbar-header">
                    
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("RAWAN", "Index", "Home")

                </div>
                <!-- Note the new id: #bs-example-navbar-collapse-2 -->
                <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
                    <ul class="nav navbar-nav" style="color:white">
                        <li>@Html.ActionLink("News", "About", "Home")</li>
                        <li>@Html.ActionLink("Supervisors", "Contact", "Home")</li>
                        <li>@Html.ActionLink("Senior Projects", "Contact", "Home")</li>
                        <li>@Html.ActionLink("About me", "Contact", "Home")</li>
                        <!-- Search bar -->
                          <li class="pull-right" style="padding-right:-50px;">
        <div class=" float-right pull-right">
            <form class="navbar-form pull-right" role="search" >
                <div class="input-group pull-right">
                    <input type="text" class="form-control pull-right" placeholder="Search" name="srch-term" id="srch-term">
                    <div class="input-group-btn">
                        <button class="btn btn-default pull-right" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>
        </div>
    </li>        
                    </ul>
                </div>
            </div>
        </div>

＆＃13;

Answer 1

ul有css类nav和navbar-nav，它赋予它float: left样式，使其与容器的左侧对齐，并进行ul换行除非明确指示，否则其内容不会在元素之间留下任何空间。为了查看float: right对搜索栏的影响，请尝试将该div放在与ul相同的容器中，如下所示：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="navbar navbar-inverse">
        <!--  <div class="container"> -->
        <div style="">
            <div class="navbar-header">
                <!-- Note: data-target="#bs-example-navbar-collapse-2" -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("RAWAN", "Index", "Home")

            </div>
            <!-- Note the new id: #bs-example-navbar-collapse-2 -->
            <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
                <ul class="nav navbar-nav" style="color:white">
                    <li>@Html.ActionLink("News", "About", "Home")</li>
                    <li>@Html.ActionLink("Supervisors", "Contact", "Home")</li>
                    <li>@Html.ActionLink("Senior Projects", "Contact", "Home")</li>
                    <li>@Html.ActionLink("About me", "Contact", "Home")</li>
                </ul>
                <!-- Search bar -->
                <div class=" float-right pull-right">
                    <form class="navbar-form pull-right" role="search" >
                        <div class="input-group pull-right">
                            <input type="text" class="form-control pull-right" placeholder="Search" name="srch-term" id="srch-term">
                            <div class="input-group-btn">
                                <button class="btn btn-default pull-right" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Answer 2

您需要将搜索栏放在<ul>之外，并将其放在与<ul>相同的容器中。此外，您只需在搜索栏的顶级容器中使用一个pull-right。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse">
  <div style="">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">RAWAN</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
      
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>


    </div>
    <!-- Note the new id: #bs-example-navbar-collapse-2 -->
    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
      <ul class="nav navbar-nav" style="color:white">
        <li><a href="#">News</a></li>
        <li><a href="#">Supervisors</a></li>
        <li><a href="#">Senior Projects</a></li>
        <li><a href="#">About Me</a></li>
      </ul>
      <!-- Search bar -->

      <div class="pull-right">
        <form class="navbar-form" role="search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
              <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
          </div>
        </form>

      </div>
    </div>
  </div>

导航栏中的右拉不起作用

2 个答案: