Bootstrap中的内联表单

最新推荐文章于 2021-06-14 17:08:46 发布

「已注销」

最新推荐文章于 2021-06-14 17:08:46 发布

阅读量879

点赞数

分类专栏：前端文章标签： Bootstrap

原文链接：https://www.mk2048.com/blog/blog.php?id=jc2ka2kcb&title=Bootstrap%E4%B8%AD%E7%9A%84%E5%86%85%E8%81%94%E8%A1%A8%E5%8D%95

版权

前端专栏收录该内容

1143 篇文章 3 订阅

订阅专栏

内联表单

为

<form>

元素添加

.form-inline

类可使其内容左对齐并且表现为

inline-block

级别的控件。 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

可能需要手动设置宽度

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为

width: 100%;

宽度。在内联表单，我们将这些元素的宽度设置为

width: auto;

，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

一定要添加

label

标签

如果你没有为每个输入控件设置

label

标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为

label

设置

.sr-only

类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如

aria-label

、

aria-labelledby

或

title

属性。如果这些都不存在，屏幕阅读器可能会采取使用

placeholder

属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。

Name

复制

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

Email address

Password

Remember me

复制

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Amount (in dollars)

.00

复制

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>