内联表单中的 Bootstrap 全角文本输入 [英] Bootstrap full-width text-input within inline-form

问题描述

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

<div class="col-md-12"><form class="form-inline" role="form"><input type="text" class="form-control input-lg" id="search-church" placeholder="您的位置(城市、州、邮编)"><button type="submit" class="btn btn-lg">搜索</button></表单>

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

这是一个小提琴:http://jsfiddle.net/52VtD/4119/embedded/结果/

所选择的答案在各方面都很彻底，而且很有帮助.这就是我最终使用的.但是我认为我最初的问题实际上是 Visual Studio 2013 中默认 MVC5 模板的问题.它包含在 Site.css 中:

输入，选择，文本区域{最大宽度:280px；}

显然这阻止了文本输入的适当扩展...对未来的 ASP.NET 模板用户的公平警告...

解决方案

引导文档对此进行了说明:

<块引用>

需要自定义宽度输入、选择和文本区域的宽度为 100%Bootstrap 中的默认设置.要使用内联表单，您必须设置一个内部使用的表单控件的宽度.

默认宽度 100% 作为所有表单元素在获得类时获得的 form-control 不适用如果您在您的计算机上使用 form-inline 类形式.

您可以查看 bootstrap.css(或 .less，无论您喜欢什么)，您会在其中找到这部分:

.form-inline {//插入内联@media(最小宽度:@screen-sm-min){//内联阻止内联"的所有内容.form-group {显示:内联块；底边距:0；垂直对齐:中间；}//在导航栏形式中，允许人们*不*使用`.form-group`.form-control {显示:内联块；宽度:自动；//防止标签堆积在`.form-group`中的输入之上垂直对齐:中间；}//输入组需要 100% 的宽度.输入组>.form-control {宽度:100%；}[...]}}

也许你应该看看 input-groups，因为我猜他们有您要使用的标记(工作小提琴 此处):

<div class="col-lg-12"><div class="input-group input-group-lg"><input type="text" class="form-control input-lg" id="search-church" placeholder="您的位置(城市、州、邮编)"><span class="input-group-btn"><button class="btn btn-default btn-lg" type="submit">搜索</button></span>

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>

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.

Here is a fiddle: http://jsfiddle.net/52VtD/4119/embedded/result/

EDIT:

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

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

解决方案

The bootstrap docs says about this:

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.

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.

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 guess 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 全角文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！