Bootstrap4让两个input并排显示

最新推荐文章于 2023-02-21 18:01:09 发布

忘尘~

最新推荐文章于 2023-02-21 18:01:09 发布

阅读量7.1k

点赞数 3

分类专栏：前端文章标签： bootstrap bootstrap4 前端

本文链接：https://blog.youkuaiyun.com/BobYuan888/article/details/102791796

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用.row和.col或.form-row进行表单布局，实现姓名输入框并排显示的效果，并对比了二者之间的细微差别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用.row和.col组合

<form>
  <div class="row">
    <div class="col">
      <label class="form-inline">名：
        <input type="text" class="form-control" placeholder="First name">
      </label>
    </div>
    <div class="col">
      <label class="form-inline">姓：
        <input type="text" class="form-control" placeholder="Last name">
      </label>
    </div>
  </div>
</form>

2、也可以使用 .form-row来取代.row（它们二者很多时候可以互换使用），区别是.form-row提供更小的沟槽缝隙。

<form>
  <div class="form-row">
    <div class="col">
      <label class="form-inline">名：
        <input type="text" class="form-control" placeholder="First name">
      </label>
    </div>
    <div class="col">
      <label class="form-inline">姓：
        <input type="text" class="form-control" placeholder="Last name">
      </label>
    </div>
  </div>
</form>

参考：

1、https://code.z01.com/v4/components/forms.html#form-grid

2、https://blog.youkuaiyun.com/qq_23350817/article/details/84072868