Question

我正在使用Bootstrap 3.0尝试制作一个Google风格的搜索框，在“提交”按钮后面有一个“搜索帮助”链接。

我的问题：当我响应时，我会丢失偏移边距，按钮会换到下一行。

<div class="row search">
  <div class="col-md-8 col-md-offset-2">
    <form class="form-inline" role="form">
      <div class="form-group">
        <label class="sr-only" for="">Enter search terms</label>
        <input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
        <input id="cn" name="cn" type="hidden" value="false" />
      </div>
      <button type="submit" id="s" class="btn btn-default">
        <span class="glyphicon glyphicon-search"></span>
      </button>
      <a href="#">Search Help</a>
    </form>
  </div>
</div>

C.f。：http://jsfiddle.net/redo1134/su3eq/2/

一切都很好>＆gt; 991px。但在991及以下我失去了抵消。

这肯定与bootstrap.css中的#media (min-width: 992px)媒体查询有关，但我不知道如何保留偏移量。

更糟糕的是：当视口大于＆lt; 768px时按钮和链接换行到下一行。

同样，我被吸引到bootstrap.css和min-width: 768px媒体查询，但我不知道如何将输入，按钮和文本保持在一起。

谢谢！

Answer 1

<div class="row search">
  <div class="col-sm-8 col-sm-offset-2">
    <form role="form">
            <div class="input-group">
              <input type="text" class="form-control input-sm">
              <span class="input-group-btn">
                <button class="btn btn-default btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
              </span>
                &nbsp;<a href="#">Search Help</a>
            </div>
    </form>
  </div>
</div>

Answer 2

因此，使用Bootstrap将自动使跨度断开以在某个断点处显示全宽度...它可以做到响应性！当我希望按照我的意愿行事时，我通常必须创建自己的风格。哪个完全没问题！

所以，使用内联样式只是为了一个简单的例子，（你可以把它们变成你的样式表的正确样式）你可以用你的搜索区域做这样的事情......还更新了jsfiddle here

<!-- Global Search -->
        <div class="row search">
            <div class="col-md-8 col-md-offset-2">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <div style="width:75%; float: left;">
                          <label class="sr-only" for="">Enter search terms</label>
                          <input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
                          <input id="cn" name="cn" type="hidden" value="false" />
                        </div>
                        <div style="width: 25%; float: left; padding-left: 10px; box-sizing: border-box;">    
                          <button type="submit" id="s" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                          </button> 
                          <a href="#">Search Help</a>
                        </div>
                        <div class="clearfix"></div> 
                    </div>
                </form>
            </div>
        </div>

Answer 3

样本：http://jsbin.com/IKaKosoX/1/

编辑：http://jsbin.com/IKaKosoX/1/edit?html,css,output

删除包裹form-inline的行col并替换为此html：

        <!-- Global Search -->

            <form class="form-inline global-search" role="form">
                <div class="form-group">
                    <label class="sr-only" for="">Enter search terms</label>
                    <input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
                    <input id="cn" name="cn" type="hidden" value="false" />
                </div>
                <button type="submit" id="s" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>

                </button> <a href="#">Search Help</a>

            </form>

删除有关表单的先前自定义css并替换为：

/* center search */

   .global-search {
    text-align:center;
    padding:10px;
  }
   .global-search * {
    display:inline-block;
    margin-bottom:0;
  }

   .global-search .form-control {
      width:120px;
  }

   .global-search a {
    display:block;
    padding-top:10px;
  }



@media (min-width:400px){
   .global-search {
    padding: 20px 0;
    text-align:center;
    }

   .global-search .form-control {
    width:300px;
   }

}

Twitter Bootstrap 3.0 - 以搜索框为中心

3 个答案:

样本：http://jsbin.com/IKaKosoX/1/