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

Posted

技术标签:

【中文标题】内联表单中的引导全角文本输入【英文标题】:Bootstrap full-width text-input within inline-form 【发布时间】:2014-05-11 13:43:06 【问题描述】:

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

<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 上会显示它占据了预期的全宽。这只是似乎没有填充的文本输入。我什至尝试添加一个内联宽度值,但它没有改变任何东西。我知道这应该很简单,只是现在感觉很愚蠢。

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

编辑:

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

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

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

【问题讨论】:

我只是想支持您对默认 MVC5 模板问题的发现。我只花了一个小时研究这个问题并(错误地)诅咒 Bootstrap,然后我在 jsfiddle 中找到了一个工作示例,促使我重新开始使用干净的 html 页面,并且工作正常。直到那时我才发现 VS2013 模板存在问题并遇到了这篇文章。天知道为什么要决定最大宽度,但它表明你在使用其他人的代码时必须小心。当遇到这样的问题时,这也证明了要回归基础。 谢谢,也使用 asp.net 模板,但我已经将输入的最大宽度设置为无,但它仍然不会占用整个宽度,除非我手动将其设置为 100%。但是它右边的按钮会下降,我希望它保持在同一行。 @Killnine 您问题中的编辑解决了我的头痛问题。实际上是问题所在,感谢您编辑您的帖子! 我从我的 site.css 文件中删除了那部分 CSS,但我仍然遇到同样的问题。有什么想法吗? 大禹!一直在努力解决这个问题,结果发现这是一个 MVC 问题!我不检查文本框的 CSS 属性是多么愚蠢!感谢您指出这一点! 【参考方案1】:

您可以将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>

【讨论】:

【参考方案2】:

我知道这个问题已经很老了,但我最近偶然发现了这个问题,找到了一个我更喜欢的解决方案,并认为我会分享它。

现在可以使用 Bootstrap 5,有一种新方法,其工作方式类似于使用 input-groups,但看起来更像是一个普通表单,没有任何 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 类的内容都应均匀分布以占用剩余空间。

【讨论】:

【参考方案3】:

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

【讨论】:

【参考方案4】:

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

input 
    max-width: 100%;

【讨论】:

【参考方案5】:

引导文档says about this:

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

如果您在表单上使用 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%;
    

    [...]
  

也许你应该看看input-groups,因为我猜他们有你想要使用的标记(工作小提琴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>

【讨论】:

见我上面的编辑。我认为 ASP.NET 模板中的 Site.css 可能让我了解了这个。但是,这是一个了不起的答案,对将来的参考很有帮助。 输入组是这样做的方法。就个人而言,当我不希望按钮紧挨着输入时,我将输入组样式调整为类似于内联表单。使用 Bootstrap LESS 的工作演示包括:jsfiddle.net/silb3r/gwxc5c75 不错!我知道这个问题是特定于引导程序的,但是如果其他人想将其放入无引导程序(不是引导程序 LESS;)网站,我已经在此处提取了相关样式:***.com/a/27413796/1241736 Fiddle 中的引导链接已损坏。它可能指向新版本的 Bootstrap 并且 Fiddle 不再工作。 @Chloe 你是对的,小提琴正在使用一个不再存在的引导 css 文件。我刚刚更新了小提琴,它又可以工作了。【参考方案6】:

如a similar question 中所述,尝试删除input-group 类的实例,看看是否有帮助。

指的是引导程序:

单个表单控件会自动接收一些全局样式。 所有带有 , 和 的文本元素 .form-control 设置为宽度:100%;默认。包装标签和 .form-group 中的控件以获得最佳间距。

【讨论】:

这不适用于内联表单。因此,您需要输入组将其强制为 100%【参考方案7】:

看看这样的东西:

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

【讨论】:

以上是关于内联表单中的引导全角文本输入的主要内容,如果未能解决你的问题,请参考以下文章

文本框测试用例

如何将引导内联表单置于网页中心

引导表单输入仅接受文本

使用引导程序在表单组中设置输入/文本区域的宽度

在 iOS 上将图像和文本内联居中

VFP文本框输入问题,请教