内联表单使输入文本具有全宽度和响应能力 [英] Inline form make input text full width and responsive

问题描述

我使用内联表单时遇到问题，输入文本并不占用所有空间。
我知道这些信息，但是我是一名初学者。

需要自定义宽度输入，选择和textareas是在Bootstrap中，默认值为
100％。要使用内联表单，您必须在其中使用的表单控件上设置
宽度。默认宽度100％作为
的所有表单元素在获得类表单时获取 - 如果您在表单上使用表单内联类，则控件没有应用
。

Cordially

 < div class =panel panel-主> 
< div class =panel-heading>< h4>搜寻选项< / h4>< / div> 
< div class =panel-body> 
< form class =form-inline> 
< div class =form-group> 
< div class =btn-group> 
  data-toggle =dropdownaria-haspopup =true
 aria-expanded =假> 
帐户ID& nbsp; < span class =caret>< / span> 
< / button> 
< ul class =dropdown-menu> 
< li>< a href =＃>帐户ID< / a>< / li> 
< li>< a href =＃>公司名称< / a>< / li> 
< li>< a href =＃>帐户类型< / a>< / li> 
< li role =separatorclass =divider>< / li> 
< li>< a href =＃>网站< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< div class =form-group> 
< input class =form-controltype =text
 value =id =filter_idplaceholder =把你的过滤器放在这里> 
< button type =buttonclass =btn btn-default> Filtrer< / button> 
< / div> 
< / form> 
< / div> 
< / div> 
  

解决方案

据

可能需要自定义宽度

在Bootstrap中，输入和选择默认应用 width：100％; 。
在内联表单中，我们将其重置为宽度：auto;所以多个
控件可以驻留在同一行上。根据您的布局，可能需要
额外的自定义宽度。

编辑

根据您的评论：

输入文本占用剩余空间。我想在一行中嵌入所有元素
，如果剩余空格，输入文本应该将它带入

使用flexbox

/ *！important仅用于SNIPPET * /。form-inline {display：flex} .flex {flex：1;显示：flex！important} .flex input {flex：1！important}

 < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet/>< div class =panel panel -primary> < div class =panel-heading> < h4>搜寻选项< / h4> < / DIV> < div class =panel-body> < form class =form-inline> < div class =form-group> < div class =btn-group> < button type =buttonclass =btn btn-default dropdown-toggledata-toggle =dropdownaria-haspopup =truearia-expanded =false>帐户ID& nbsp; < span class =caret>< / span> < /按钮> < ul class =dropdown-menu> < li>< a href =＃>帐户ID< / a>< / li> < li>< a href =＃>公司名称< / a>< / li> < li>< a href =＃>帐户类型< / a>< / li> < li role =separatorclass =divider>< / li> < li>< a href =＃>交易平台< / a>< / li> < / UL> < / DIV> < / DIV> < div class =form-group flex> < input class =form-controltype =textvalue =id =filter_idplaceholder =将您的过滤器放在这里> < button type =buttonclass =btn btn-default> Filtrer< / button> < / DIV> < /形式> < / div>< / div>  

I have a problem when I use inline-form the input text does not take all the space. I am aware of that information, but I am a bootstrap beginner.

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.

Cordially

<div class="panel panel-primary">
  <div class="panel-heading"><h4>Search Options</h4></div>
  <div class="panel-body">
    <form class="form-inline">
        <div class="form-group">
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle"
                      data-toggle="dropdown" aria-haspopup="true"
                      aria-expanded="false">
                Account ID &nbsp; <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">Account ID</a></li>
                <li><a href="#">Company Name</a></li>
                <li><a href="#">Account Type</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Marketplaces</a></li>
              </ul>
            </div>
        </div>
        <div class="form-group">
            <input class="form-control" type="text"
                   value="" id="filter_id" placeholder="Put your filter here">
            <button type="button" class="btn btn-default"> Filtrer </button>
        </div>
    </form>
  </div>
</div>

解决方案

According to Docs

May require custom widths

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

EDIT

as per your comment:

the input text take the rest of space. I want inline all the elements in a single row and if a space is left the input text should take it

use flexbox

/* !important ONLY USED FOR SNIPPET */

.form-inline {
  display: flex
}

.flex {
  flex: 1;
  display: flex !important
}

.flex input {
  flex: 1 !important
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4>Search Options</h4>
  </div>
  <div class="panel-body">
    <form class="form-inline">
      <div class="form-group">
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Account ID &nbsp; <span class="caret"></span>
              </button>
          <ul class="dropdown-menu">
            <li><a href="#">Account ID</a></li>
            <li><a href="#">Company Name</a></li>
            <li><a href="#">Account Type</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Marketplaces</a></li>
          </ul>
        </div>
      </div>
      <div class="form-group flex">
        <input class="form-control" type="text" value="" id="filter_id" placeholder="Put your filter here">
        <button type="button" class="btn btn-default"> Filtrer </button>
      </div>
    </form>
  </div>
</div>

这篇关于内联表单使输入文本具有全宽度和响应能力的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！