Question

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

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

亲切

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

Answer 1

根据Docs

可能需要自定义宽度

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

修改

根据你的评论：

输入文本占用其余空间。我想要内联所有元素在一行中，如果留下空格，输入文本应该是

使用flexbox

＆＃13;
＆＃13;
/* !important ONLY USED FOR SNIPPET */ .form-inline { display: flex } .flex { flex: 1; display: flex !important } .flex input { flex: 1 !important }
＆＃13;
<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   <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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

在标记中添加一个容器作为“上下文”，然后使用它在这个特定的上下文中覆盖你的css：

sudo supervisorctl restart my_app

CSS

<div class="special-form">
  <!-- form -->
</div>

内联表单使输入文本具有全宽和响应性

2 个答案: