4

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

一切都很好> 991px。但是在 991 及以下，我失去了偏移量。

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

更糟糕的是：当视口 <768px 时，按钮和链接将换行到下一行。

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

谢谢！

4

3 回答 3

4 
<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>
于 2013-09-14T23:12:15.257 回答
2

因此，使用 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>
于 2013-08-22T22:54:05.193 回答
2

演示：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;
   }

}
于 2013-12-24T07:24:32.683 回答