使用 Bootstrap 使表单元素内联 100% 宽度答案

【问题标题】：Make form elements inline 100% width with Bootstrap使用 Bootstrap 使表单元素内联 100% 宽度
【发布时间】：2019-09-15 04:57:34
【问题描述】：

我正在尝试在 div class="col-xs-6" 内内联元素（请参阅http://jsfiddle.net/hx1mvjnv/2/）

<form role="form">
<div class="row">
    <div class="col-xs-6" style="background: yellow">
        <ul class="list-inline">
            <li><label for="dept" class="label label-default">Department</label> <input type="text" class="form-control" id="dept" /></li>
            <li>
                <button type="button" class="btn btn-default inline" aria-label="Left Align">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </li>
        </ul>
    </div>
</div>
</form>

我的目标是使它们 100% 宽度（div 内没有可用的黄色空间）。将 form 样式设置为 from-inline 没有帮助。有没有办法做到这一点？

【问题讨论】：

你也想在同一行添加标签“document”吗？
@Dura 不，我需要它在文本编辑上方
听起来像你想要的btn-block <button>

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

看看这个：

Bootply

<form role="form">
  <div class="row">
    <div class="col-xs-6" style="background: yellow">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-1">
            <label for="dept" class="label label-default">Department</label> 
          </div>
          <div class="col-xs-10">
            <input class="form-control" id="dept" type="text">
          </div>
          <div class="col-xs-1">
            <button type="button" class="btn btn-default inline" aria-label="Left Align">
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

基本上，我在您的col-xs-6 中放置了一个container-fluid，然后为每个输入创建了另一个col-xs-* 结构，这样它们就可以完全填充您的div。请记住，一行 12 列。

注意：请记住，col-xs-1 和 col-xs-10 元素可以更改为您想要的任何宽度，只要它们不超过 12。

希望有帮助！

【讨论】：

我需要标签位于文本框上方。我在这里修改了您的示例bootply.com/9ZJJYYdD6a，但我仍然无法将右字形按钮对齐到底部（与文本框相同的行）
是的，我明白了。该按钮未设置为与 div 的中心垂直对齐，并且我不知道 Bootstrap 处理该按钮的方式，因此您可能需要为此使用一些自定义 cs。也许给容器一个ID和"style: vertical-align:center"它？不过，我不太确定基本 CSS。

【解决方案2】：

这是一个修改后的版本，它将搜索按钮与文本框对齐。 http://www.bootply.com/MG8F1B1J2X

【讨论】：

【解决方案3】：

在Bootstrap 4.3 中，“w-100”类对我有用。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-6">
        <button type="button" class="btn btn-primary w-100">Left Button</button>
    </div>

    <div class="col-6">
        <button type="button" class="btn btn-primary w-100">Right Button</button>
    </div>
</div>

【讨论】：

【解决方案4】：

我最终用表格包装了所有内容：http://www.bootply.com/RDvzufjN6A

<form role="form">
    <div class="row">
        <div class="col-xs-6" style="background: yellow;">
        <table><tbody><tr>
            <td>
                <label class="label label-default" for="dept">Department</label>
                <input class="form-control" id="dept" type="text">
            </td>
            <td style="width: 1%; vertical-align: bottom;">
                <button class="btn btn-default inline" aria-label="Left Align" type="button">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </td>
        </tr></tbody></table>
        </div>
    </div>
</form>

【讨论】：

这对你有用，但我认为没有表格有更好的方法。祝你好运！