在内联表单中使用Bootstrap全宽度文本输入框

Question

在内联表单中使用Bootstrap全宽度文本输入框

157

我很难创建一个文本框，使其适合我的容器区域的整个宽度。

<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上时，显示它占用了预期的完整宽度。只是输入文本似乎没有填充满。我甚至尝试添加了一个行内宽度值，但没有改变任何内容。我知道这应该很简单，但现在感觉真的很愚蠢。

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

编辑:

选定的答案非常详细，并且非常有帮助。这就是我最终使用的方法。然而，我认为我的最初问题实际上是Visual Studio 2013中默认的MVC5模板存在问题。其中包含以下内容：Site.css:

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

很明显，那会儿阻止文本输入框适当地扩展...对未来的ASP.NET模板用户有一个公平的警告...

- Killnine

7

我想强调你关于默认MVC5模板问题的发现。在我找到一个在jsfiddle中运行良好的示例并重新开始使用干净的HTML页面之前，我花了一个小时去研究这个问题并（错误地）抱怨Bootstrap。仅在那时我才意识到VS2013模板存在问题并发现了这篇帖子。谁知道为什么要决定设置最大宽度，但这表明在使用其他人的代码时必须小心。这也证明了当遇到这种问题时回归基础是很重要的。 - Jason Snelders

2

谢谢，我也在使用ASP.NET模板，但是我已经将输入框的最大宽度设置为无限，但它仍然不能占满整个宽度，只有手动将其设置为100%时才行。但这样做会导致旁边的按钮下移，而我希望它们保持在同一行。 - Ronen Festinger

@Killnine，你在问题中的修改解决了我的头痛问题。事实上，那就是问题所在，感谢你编辑帖子！ - Flame_Phoenix

1

天啊！我一直在苦苦挣扎，结果发现这是一个MVC问题！我真是太蠢了，竟然没有检查文本框的CSS属性！感谢你指出这一点！ - Hajjat

1

谢谢您。和之前的许多人一样，我花了一个小时或两个小时来尝试解决这个问题。（别忘了在编辑site.css后按<Ctrl>F5进行完全刷新 - 这也浪费了我几分钟的时间 :-)) - Peter

显示剩余5条评论

7个回答

38

看看这个东西：

<form role="form">  
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" />
          <div class="input-group-btn">
            <button type="submit" class="btn">Search</button>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.row -->
</form>

http://jsfiddle.net/n6c7v/1/

- haxxxton

你的回答帮助我意识到我只是在输入字段中简单地缺少了 class="form-control"。 - stevec

11

如类似问题中所述，尝试删除input-group类的实例，看看是否有帮助。

引用Bootstrap文档：

每个表单控件会自动获得一些全局样式。所有具有 .form-control 的文本、select 和 textarea 元素默认设置为 width: 100%。将标签和控件包裹在 .form-group 中以获得最佳间距。

- kurdtpage

Per morten，这不适用于内联表单。因此，您需要使用input-group来强制其为100％。 - user441058

4

您可以使用flex-fill类来设置input的样式。

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

- Minh Ho

4

尝试以下代码可以实现您想要的结果。

input {
    max-width: 100%;
}

- Naveed Khan

1

使用Bootstrap >4.1版本，只需使用flexbox实用类即可。在列中放置一个flexbox容器，然后给其中的所有元素添加"flex-fill"类。与内联表单一样，您需要自行设置元素的边距/填充。

.prop-label {
    margin: .25rem 0 !important;
}

.prop-field {
    margin-left: 1rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
 <div class="col-12">
  <div class="d-flex">
   <label class="flex-fill prop-label">Label:</label>
   <input type="text" class="flex-fill form-control prop-field">
  </div>
 </div>
</div>

- John M

1

我知道这个问题很旧了，但最近我偶然发现了一个更好的解决方案，所以想分享一下。

现在 Bootstrap 5 可用，有一种新方法可实现类似于使用 input-group 的效果，但看起来更像普通表单，而无需进行任何 CSS 调整：

<div class="row g-3 align-items-center">
    <div class="col-auto">
        <label>Label:</label>
    </div>
    <div class="col">
        <input class="form-control">
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary">Button</button>
    </div>
</div>

col-auto类使这些列适应其内容（在本例中为标签和按钮），而任何具有col类的内容都应均匀分布以占用剩余空间。

- TCF

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- morten.c · Accepted Answer

Bootstrap文档中提到：

需要自定义宽度默认情况下，Bootstrap中的输入、选择和文本区域在样式上是100%宽度。要使用内联表单，必须为内部使用的表单控件设置宽度。

当您在表单上使用form-inline类时，如果表单元素具有form-control类，则它们将不再具有默认的100％宽度。

你可以查看bootstrap.css（或.less，任何你喜欢的）找到这部分内容:

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

    [...]
  }
}

也许你应该看一下输入组，因为我猜它们恰好有你想要使用的标记（工作的 fiddle 例子在这里）：

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