Twitter Bootstrap 3.0 - 居中的搜索框

Posted 2023-03-06

【中文标题】Twitter Bootstrap 3.0 - 居中的搜索框

【英文标题】：Twitter Bootstrap 3.0 - centered search box

【发布时间】：2013-08-25 17:43:37

【问题描述】：

我正在使用 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>

参考：http://jsfiddle.net/redo1134/su3eq/2/

>991 像素时一切正常。但是在 991 及以下，我失去了偏移量。

这肯定和bootstrap.css中的#media (min-width: 992px)媒体查询有关，但是不知道怎么保持偏移量。

更糟糕的是：当视口为

再次，我被 bootstrap.css 和 min-width: 768px 媒体查询所吸引，但我不知道如何将输入、按钮和文本放在一起。

谢谢！

【问题讨论】：

这听起来像你不希望它响应？

有效的问题，但是是的，我确实希望它能够响应。我想要两个最大视口的偏移量，然后是所有较小尺寸的全宽。诀窍似乎是将链接与输入+提交保持在同一行。

【参考方案1】：

因此，使用 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>

【参考方案2】：

<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>

【讨论】：

非常感谢。工作完美。但对我来说，当我使用 col-sm-6 时，我需要将 col-sm-offset-2 替换为 col-sm-offset-3 :)

【参考方案3】：

---

演示：http://jsbin.com/IKaKosoX/1/

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

---

删除包含表单内联的行 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;