如何设置自定义导航栏和自定义折叠？右边没有在移动设备中排队

Question

bootply（http://bootply.com/99184）

在移动视图中，折叠搜索按钮（右侧）低于文本（左侧）

我希望文本和折叠搜索按钮位于同一行（外观样式）

Answer 1

演示：http://jsbin.com/ojUbevul/1/edit?html,css,output

http://jsbin.com/ojUbevul/2

这是通过查看示例和阅读文档来实现的。我希望有其他熟悉BS3的人会回答这个问题。如果您通过GetBootstrap.com上的文档和示例以正确的方式构建html，则实际上不需要执行任何先前的答案。

<div class="navbar">
 <!-- if it has no bg color-->
 <form class="form-inline">
  <!--form wraps entire bar-->
  <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 Search    </span> Search Icon     </button>

    <!--/custom text here- -->
    <div class="navbar-custom-left">
     <strong> <a href="?kind=recv">Received </a>

 ( <a title="안읽은쪽지" href="?kind=recv&amp;unread=only"> <span class="red">197 </span> </a> / <a href="?kind=$kind">507</a> / 
 <a href="?kind=recv&amp;sfl=me_file&amp;stx=me_file">??
 </a>)
 </strong>
    </div>
    <!--end custom text-->

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

   <div class="navbar-collapse collapse">
    <div class="navbar-right navbar-form">
     <div class="form-group" role="search">
      <select name="sfl" class="form-control" id="sfl">
       <option value="me_subject_memo">제목+내용    </option>
       <option value="me_subject">제목    </option>
       <option value="me_memo">내용    </option>
       <option value="me_send_mb_nick">보낸(별명)    </option>
       <option value="me_send_mb_id">보낸(아이디)    </option>
      </select>
     </div>
     <!--/.form-group -->

     <div class="form-group">
      <input name="stx" class="form-control" required maxlength="15" value="" itemname="검색어" type="text">
     </div>
     <!--/.form-group -->

     <button class="btn btn-primary">검색    </button>
    </div>
    <!--/.navbar-right navbar-form-->

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

  </div>
  <!--/.container -->

 </form>
 <!--/.form-inline navbar-form navbar-right -->

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



/* --------- CSS ---------- */
.navbar-custom-left {
  float: left;
  padding: 15px 15px;
  line-height: 20px;
}

.red {color:red}

Answer 2

问题似乎是搜索元素上的填充和margin-top。要解决此问题，请尝试删除这些行

padding: 9px 10px;
margin-top: 8px;

来自以下CSS：

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

Answer 3

您需要将line-height设置为元素的高度。在您的容器和样式集line-height中添加一个类：

DEMO

HTML

<div class="container lineheight34">  <!-- lineheight34 is an example -->
...
</div>

CSS

.lineheight34{
    line-height:34px;
}

Answer 4

我将“按钮”更改为“a”。

这

<button class="navbar-toggle"

到

<a class="btn btn-navbar" 

bootply（http://bootply.com/99206）