Bootstrap 3：导航栏中的输入组占用整个宽度 [英] Bootstrap 3: Input group in navbar form takes up entire width

问题描述

这是引导程序的navbar格式。

默认的HTML是：

  form class =navbar-form navbar-leftrole =search> 
< div class =form-group> 
< input type =textclass =form-controlplaceholder =搜索awesome stuff> 
< / div> 
< button type =submitclass =btn btn-default>搜索< / button> 
< / form> 
  

但我想像一个输入组一起加入输入和按钮。但是，当我尝试将输入和按钮包裹在 input-group 周围时，它将占据整个宽度：

HTML：

 < form class =navbar-form navbar-leftrole =search> 
< div class =input-group> 
< input type =textclass =form-controlplaceholder =搜索awesome stuff> 
< span class =input-group-btn>< button type =submitclass =btn btn-default> Search< / button>< / span& 
< / div> 
< / form> 
  

我读过）

So this is what bootstrap's navbar form looks like.

The default HTML is:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

But I want to join the input and button together like an input-group. However, when I try to wrap the input and button around an input-group, it ends up occupying the entire width:

HTML:

<form class="navbar-form navbar-left" role="search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
    <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
  </div>
</form>

I've read some solutions for this, but I want to avoid using hacks like style: "width: 200px;"

Any solutions? Thanks so much in advance.

解决方案

I thought of a minimal way to fix this without modifying the default structure of the navbar form used in the Bootstrap documentation.

Add class navbar-input-group to the form

<form class="navbar-form navbar-left navbar-input-group" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

CSS (place in media query if necessary):

.navbar-input-group {
  font-size: 0px; /*removes whitespace between button and input*/
}

.navbar-input-group input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.navbar-input-group .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px;
}

or SCSS (keeps responsiveness intact):

@import "bootstrap-variables";

.navbar-input-group {
  @media (min-width: $screen-sm) {
    font-size: 0px; /*removes whitespace between button and input*/

    input {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    .btn {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-left: 0px;
    }
  }
  @media (max-width: $screen-xs-max) {
    margin-top:0px;
    margin-bottom:0px;

    .btn {
      width:100%;
    }
  }
}

Result:

For purposes of clarity, I am targeting descendant elements in the CSS. This is not the most efficient way to target CSS elements. If you like this answer, consider giving the input and button unique class names and targeting them without any descendant selectors in your CSS (read: http://csswizardry.com/2011/09/writing-efficient-css-selectors/)

这篇关于Bootstrap 3：导航栏中的输入组占用整个宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！