css - 如何设置自定义导航栏和自定义折叠？手机右边不排队

Question

bootply ( http://bootply.com/99184 )

在移动 View 中，折叠的搜索按钮(右侧)低于文本(左侧)

我希望文本和折叠的搜索按钮在同一行(外观样式)

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}