导航栏中没有输入组的引导 3.1.1 宽搜索面板

Posted 2023-03-05

【中文标题】导航栏中没有输入组的引导 3.1.1 宽搜索面板

【英文标题】：Bootstrap 3.1.1 wide search panel without input group inside navbar

【发布时间】：2014-10-04 12:19:08

【问题描述】：

我在导航栏的左角有一个带有单独按钮的搜索表单。我不想将输入和按钮连接在一起。 但我得到了非常难看的解决方案。

来源（例如来自官方引导站点的示例）

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

如果没有如此可怕的标记，是否有可能获得相同的结果。

【问题讨论】：

您能否更好地解释您想要实现的目标？您希望按钮位于文本框下方吗？

@IndieRok 我希望输入文本占据表单内的所有空间，除了按钮和小填充和边距所需的位置

【参考方案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

【讨论】：

不，我尝试达到最后一张图片的结果

【参考方案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;