Question

我在导航栏的左下角有单独的按钮搜索表单。我不想将加入输入和按钮放在一起。但是我得到了非常丑陋的解决方案。

来源（例如来自官方自助网站的示例） enter image description here

<nav class="status-navbar navbar navbar-default" role="navigation">
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
<div class="row">
                <div class="search-panel col-lg-3 col-md-3">
                    <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">                        
                            <input type="text" class="form-control"
                                placeholder="Quick Search">     
                                </div>
                                <button type="button" class="btn btn-primary">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                    </form>                 
                </div>
</div>
</div>

丑陋的解决方案

<div class="row">
                <div class="search-panel col-lg-3 col-md-3">
                    <form class="navbar-form navbar-left" role="search" style="     width: 100%;
">
                    <div class="form-group" style="
    width: 88%;
">                      
                            <input type="text" class="form-control" placeholder="Twitter Quick Search" style="
    width: 100%;
">      
                                </div>
                                <button type="button" class="btn btn-primary">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                    </form>

                </div>

如果没有这种糟糕的标记，是否有可能获得相同的结果。

Required result

Answer 1

编辑：好的，我不确定我是否完全不喜欢你想要的东西。所以这是一个新版本。

我没有保留默认的引导代码，而是取出了一些默认类并添加了我自己的自定义类，以便覆盖所有内容并根据您的设计进行自定义。当你调整大小时，输入和按钮总是并排放置，它似乎不会引起任何问题。如果您认为输入有点太长，只需更改'.search-panel'中的列值，即col-xs-x col-sm-x col-md-x col-lg-x。

UPDATED EXAMPLE

这是更新的html：

<div class="row">
    <div class="search-panel col-xs-12 col-sm-5 col-md-5 col-lg-5">
        <form>
            <div class="search-container">                      
              <input type="text" class="form-control myInput" placeholder="Twitter Quick Search">
              <button type="button" class="btn btn-primary myBtn">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </div>
        </form>
    </div>
</div>

自定义css：

.myInput{
  width:80%;
  display:inline-block;
  border-color:#66afe9;
  background:#6c7072;
}

.myInput::-webkit-input-placeholder{
    color:#5c5759;
    font-weight:bold;
}

.search-container{
    background:#13435a;
    padding:5px;
}

.myBtn{
  position:relative;
  top:-1px;
}

注意这个伪css元素':: - webkit-input-placeholder'。这可以控制占位符文本的css，当输入具有焦点时，该文本会消失。 SOURCE

Answer 2

我认为这不是最佳决定，但

<div class="row">
                <div class="search-panel col-lg-3 col-md-4">
                    <form class="search-form navbar-form navbar-left" role="search">
                        <div class="form-group col-xs-10 col-sm-10 col-md-10 col-lg-10">
                            <input type="text" class="search-input form-control"
                                placeholder="Twitter Quick Search">
                        </div>
                        <div class="col-xs-2 col-md-2 col-lg-2">
                            <button type="button" class="btn btn-primary">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </div>
                    </form>
                </div>
</div>

.search-form {
    width: 100%;
    padding-right: 0;
}

.search-form .form-group {
    padding: 0;
} 

.search-input {
    width: 100% !important;
}

Bootstrap 3.1.1宽搜索面板，导航栏内没有输入组

2 个答案: