Bootstrap全文本输入inline-form [英] Bootstrap full-width text-input within inline-form

问题描述

我在努力创建一个适合我的容器区域的整个宽度的文本框。

I am struggling to create a textbox that fits the entire width of my container area.

<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">           
                <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
                <button type="submit" class="btn btn-lg">Search</button>            
        </form>
    </div>
</div>

当我执行上述操作时，两个表单元素是内联的，最多只占用几个列。将鼠标悬停在firebug中的 col-md-12 div上显示它占据了预期的全宽。它只是文本输入，似乎没有填充。我甚至尝试添加一个线内宽度值，但它没有改变任何东西。我知道这应该很简单，现在感觉真的很蠢。

When I do the above, the two form elements are in-line, as I expect, but don't take up more than a few columns, at best. Hovering over the col-md-12 div in firebug shows it taking up the expected full width. It's just the text input that doesn't seem to fill. I even tried adding an in-line width value but it didn't change anything. I know this should be simple, just feeling really dumb now.

这里是一个小提琴： http://jsfiddle.net/52VtD/4119/embedded/result/

编辑：

选择的答案在各方面都是彻底的，并提供了非常好的帮助。这是我最后使用。

The selected answer is thorough in every way and a wonderful help. It's what I ended up using. However I think my initial issue was actually a problem with the default MVC5 template within Visual Studio 2013. It contained this in Site.css:

input,
select,
textarea {
    max-width: 280px;
}

显然，阻止文本输入不正确扩展...公平警告到未来的ASP.NET模板用户...

Obviously that was blocking the text-input from expanding appropriately... Fair warning to future ASP.NET template users...

推荐答案

引导文档说明这一点：

需要自定义宽度输入，选择和textareas是100 ％wide by
在Bootstrap中为默认值。要使用内联表单，您必须在表单控件中使用
宽度。

Requires custom widths Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

如果您使用 form-inline form-control c $ c>类。

The default width of 100% as all form elements gets when they got the class form-control didn't apply if you use the form-inline class on your form.

你可以看看bootstrap.css（或者不管你喜欢什么），你会发现这个部分：

You could take a look at the bootstrap.css (or .less, whatever you prefer) where you will find this part:

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

也许你应该看看输入组，因为我觉得他们有您想使用的标记（工作无意识这里）：

Maybe you should take a look at input-groups, since I gues they have exactly the markup you want to use (working fiddle here):

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>

这篇关于Bootstrap全文本输入inline-form的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！