Html 引导内联表单中的全宽文本输入

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

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

引导文档：

需要自定义宽度输入、选择和文本区域的宽度为100% 引导中的默认值。要使用内联表单，必须设置 中使用的窗体控件的宽度

如果在表单上使用

表单内联

类，则当所有表单元素获得类

表单控件

时，默认宽度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%;
    }

    [...]
  }
}

也许你应该看一下，因为我想他们正是你想要使用的标记（工作小提琴）：

搜寻

看一看这样的东西：

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

搜寻

如中所述，尝试删除

输入组

类的实例，看看是否有帮助

参考引导：

单个表单控件会自动接收一些全局样式。 所有文本和元素 .窗体控件设置为宽度：100%；默认情况下。包装标签和 窗体组中的控件以获得最佳间距

尝试下面的方法来达到你想要的结果

---

对于Bootstrap>4.1，这只是使用flexbox实用程序类的一个例子。只要在你的专栏里有一个flexbox容器，然后给它里面的所有元素一个“flex fill”类。与内联表单一样，您需要自己设置元素的边距/填充

.prop标签{
保证金：.25雷姆0！重要；
}
.道具场{
左边距：1 em；
}

标签：

我知道这个问题已经很老了，但最近我偶然发现了它，找到了一个我更喜欢的解决方案，我想与大家分享一下

现在Bootstrap 5可用了，有一种新的方法，其工作原理类似于使用

输入组

s，但看起来更像一个普通表单，没有任何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

类的列都应该均匀分布以占用剩余空间。

请参见上面的“我的编辑”。我想ASP.NET模板中的Site.css可能让我想到了这一点。然而，这是一个非常好的答案，对未来的参考非常有帮助。输入组是实现这一点的方法。就我个人而言，当我不希望按钮紧靠输入旁边时，我会调整输入组样式，使其类似于内联表单。包含无引导的工作演示：很好！我知道这个问题是特定于引导的，但是如果其他人想把它放到一个无引导（而不是无引导）的网站上，我在这里提取了相关的样式：小提琴中的引导链接断了。它可能指向了一个新版本的引导，小提琴不再工作。@Chloe你说得对，小提琴使用的是一个引导css文件，它已经不存在了。我刚刚更新了小提琴，它又开始工作了。我只是想支持你关于默认MVC5模板问题的发现。我只花了一个小时研究这个问题，并（错误地）咒骂Bootstrap，然后在jsfiddle中找到了一个工作示例，它促使我重新开始使用一个干净的HTML页面，它工作得很好。直到那时，我才意识到VS2013模板存在问题，并看到了这篇文章。天知道为什么会选择“最大宽度”，但这表明在使用其他人的代码时必须小心。这也证明了在遇到这样的问题时可以回归到基本面。谢谢，也使用了asp.net模板，但我已经将输入的最大宽度设置为“无”，但它仍然不会占用整个宽度，除非我手动将其设置为100%。但是，它右边的按钮按下了，我希望它保持在同一行。@Killnine你问题中的编辑解决了我的头疼问题。这其实就是问题所在，谢谢你编辑你的帖子！我从我的site.CSS文件中删除了那一点CSS，我仍然有同样的问题。有什么想法吗？大宇！一直在努力解决这个问题，结果发现这是一个MVC问题！我没有检查文本框的css属性，这是多么愚蠢啊！谢谢你指出这一点！根据morten的说法，这不适用于内联表单。因此，您需要输入组强制其为100%

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

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

input {
    max-width: 100%;
}

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