我想制作一个 inline form对于移动视口(viewport),搜索按钮将位于输入框旁边。但是文件说

This only applies to forms within viewports that are at least 768px wide.

如何在不使用内联表单的情况下实现此结果?

手机屏幕

导航栏标题

这是 navbar-header 片段:(在表单中添加 .form-inline 不会像文档中提到的那样使其内联)

<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> 
    <!-- icon-bar span omitted --> 
  </button> 
  <a class="navbar-brand" href="#">Brand</a> 
 
  <div class="clearfix"></div> 
 
  <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> 
</div> 

请您参考如下方法:

在搜索了一些 Bootstrap 组件之后,我可以通过将表单视为 input group 来实现我想要的。而不是作为一个表单组。

这是我的新导航栏标题的片段

<div class="navbar-header"> 
  <a class="navbar-brand" href="#">Brand</a><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <!-- omitted icon-bar span --> 
  </button> 
 
  <div class="clearfix"></div> 
 
  <div class="container"> 
    <form class="navbar-form navbar-left" role="search"> 
      <div class="input-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
        <span class="input-group-btn"> 
          <button type="submit" class="btn btn-default">Submit</button>                 
        </span> 
      </div> 
    </form> 
  </div> 
</div> 


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!