将Bootstrap 3导航栏右对齐,并将搜索框也右对齐

e4yzc0pl  于 2023-01-10  发布在  Bootstrap
关注(0)|答案(4)|浏览(386)

我正在使用bootstrap 3构建一个站点,遇到了以下问题:
我的网站设计有一个右对齐的导航,应该包括一个搜索栏后的最后一个链接。http://imgur.com/eevc0iS
我似乎只能使这个工作,如果我保持导航左对齐后的标志。我不能得到导航和搜索栏是在一个很好的右对齐线。
我想让它看起来和我现在拥有的差不多,但是在另一边有搜索栏。
下面是代码:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" rel="home" href="#">BRAND</a>
        </div><!-- / .navbar-header--> 
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">link</a></li>
            <li><a href="#">link two</a></li>
            <li><a href="#">link three</a></li>
            <li><a href="#">about</a></li>
      </ul>
      <div class="col-sm-3 col-md-3 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><!--/.nav-collapse -->
</div><!-- /. container-->
</div> <!-- /. navbar-->
dohp0rv5

dohp0rv51#

您不需要使用div进行换行就可以向右浮动。
简单地使用已有的类名,线索就在标记.navbar-left.navbar-right中。使用这些来使元素在导航栏中左右浮动并避免“除法”。
你将需要交换链接和搜索周围,因为我们是浮动的。
JsFiddle
还有.pull-left.pull-right,您可以在页面上的其他地方使用它们来满足类似的浮点要求。

bfhwhh0e

bfhwhh0e2#

我关闭了搜索表单div.works perfect之后的ul标记。

  • 链接
  • 链接二
  • 三连杆
  • 关于
<div class="col-sm-3 col-md-3 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>
    </ul>
</div><!--/.nav-collapse -->
azpvetkf

azpvetkf3#

我用Bootstrap官方网站上的最新样本做了测试,我认为它可以通过一些css规则来完成。 Package 你想要右对齐的元素,并设置 Package 器的位置和右。见样本。

#right
{
    position:absolute;
    right:0px;
}

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- 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="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>

        <div id="right">
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
            </div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

JSFIDDLE

thtygnil

thtygnil4#

    • 问题**:对齐搜索框和按钮
    • 溶液**:下面的代码是rubyhtml.erb文件的一部分。
<!-- Search form -->
  <%= form_tag "", url: students_path, class:"form-inline my-2 my-lg-0", role: "search", method: :get do %>
      <div class="input-group">        
        <%= text_field_tag :search, @search_term, class: "form-control mr-sm-2", placeholder: "Search" %>
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </div>
  <% end %>
  <!-- Search form -->

    • 注意**:输入组解决了我的问题。

相关问题