Twitter Bootstrap 3.0 - 居中搜索框

Question

我正在使用Bootstrap 3.0进行工作，试图制作一个谷歌风格的搜索框，在提交按钮后面添加一个“搜索帮助”链接。

我的问题是：当我进行响应式设计时，我失去了偏移边距，按钮会换行。

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

屏幕宽度在大于991px时一切正常，但当宽度小于等于991px时我失去了偏移量。

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

更糟糕的是：当视窗小于768px时，按钮和链接会换行。

同样，我注意到了bootstrap.css和min-width: 768px的媒体查询，但我不知道如何将输入、按钮和文本完整地放在一起。

谢谢！

- redo1134

---

这有点像你不想它是响应式的？ - StackExchange What The Heck

合理的问题，但是是的，我希望它是响应式的。我想在两个最大的视口处设置偏移量，然后在所有较小的尺寸上设置全宽。关键似乎是让链接与输入+提交保持在同一行。 - redo1134

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>

- Bass Jobsen

---

非常感谢。完美地解决了问题。 但是对于我来说，由于我使用的是col-sm-6，我需要将col-sm-offset-2替换为col-sm-offset-3 :) - Waqas

Answer 2

---

示例: http://jsbin.com/IKaKosoX/1/

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

---

移除包含form-inline的行列，用下列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;
   }

}

- Christina

Answer 3

因此，使用Bootstrap将自动使跨度在某个断点处断开以显示全宽...这是为了响应性！当我想要某些内容按照我的意愿进行操作时，我通常必须创建自己的样式。这完全没问题！

因此，仅供快速示例使用内联样式（您可以将其转换为适合您样式表的正确样式），您可以像这样处理搜索区域...也更新了jsfiddle这里

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

- jampafoo