如何设置自定义导航栏和自定义折叠?右侧未在移动设备中排列

公开码

bootply(http://bootply.com/99184

在移动视图中,折叠的搜索按钮(右侧)比文本(左侧)低

我要在同一行中显示文字和折叠的搜索按钮(外观样式)

克里斯蒂娜(Christina)

演示: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}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何设置自定义导航栏和自定义折叠?右侧未在移动设备中排列

来自分类Dev

iOS自定义右侧导航栏

来自分类Dev

自定义导航栏折叠按钮

来自分类Dev

自定义移动导航

来自分类Dev

在UINavigationController中设置自定义导航栏类

来自分类Dev

自定义高度Bootstrap的导航栏

来自分类Dev

iOS自定义形状导航栏

来自分类Dev

自定义Wordpress导航栏

来自分类Dev

自定义顶部导航栏

来自分类Dev

每个视图的自定义导航栏

来自分类Dev

自定义Bootstrap 3.0导航栏

来自分类Dev

导航栏的自定义barTintColor

来自分类Dev

更新自定义导航栏的标题

来自分类Dev

Flutter 自定义导航栏

来自分类Dev

如何为自举导航栏添加自定义样式?

来自分类Dev

如何在swiftui中自定义导航栏

来自分类Dev

如何创建自定义导航栏(WordPress)

来自分类Dev

如何在 RNRF 中使自定义导航栏透明

来自分类Dev

如何使用 ReactNative 制作自定义导航栏?

来自分类Dev

如何自定义导航栏中悬停的大小?

来自分类Dev

设置自定义样式和操作栏

来自分类Dev

在自定义布局中排列R图

来自分类Dev

如何打开和关闭导航抽屉,单击Android中的自定义操作栏图标?

来自分类Dev

如何在栏上设置自定义标签?

来自分类Dev

自定义宽度上的Bootstrap导航栏折叠媒体查询

来自分类Dev

自定义高度导航栏的Bootstrap 4折叠问题

来自分类Dev

自定义宽度上的Bootstrap导航栏折叠媒体查询

来自分类Dev

在工具栏右侧添加自定义视图

来自分类Dev

如何自定义动作栏样式?