代码之家 › 专栏 › 技术社区 › Mahesh G

将选择和输入框与Boostrap组合成一行

twitter-bootstrap css

Mahesh G · 技术社区 · 7 年前

如何使用引导框架将所有表单组项(如选择、输入项)组合在一起?

我尝试了以下方法,但正如预期的那样,我得到了选择框和输入框之间的空间

DEMO

2 回复 | 直到 7 年前

Robert 7 年前

问题是你的声明 mx-sm-3 . 这适用于 -sm 断点 和更大 如果没有其他声明。更正此问题的最简单方法是在较大断点处添加重置: mx-md-0 :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="form-inline">
    <div class="form-group">
      <select class="custom-select mx-md-0">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
      </select>
    </div>
    <div class="form-group mx-sm-3 mx-md-0">
      <input class="form-control" type="text">
    </div>
    <div class="form-group mx-sm-3 mx-md-0">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>

展开上面的代码段,查看当超过 -sm公司 断点。我还改变了你的 <select> 使用 custom-select 班

Jade Cowan 7 年前

我不确定这是否是你想要的,但如果不是,请再澄清一下你想要的是什么,我可能会提供帮助。

如果您只是想将项目分组在一起,bootstrap有一个 card 类,该类允许您将元素分组到各种容器中。下面的代码包装在引导网格系统中。我已将您的代码放入 div 标记为 卡片 班在第二个示例中,我删除了 inline 窗体类,以便您可以看到输入是如何垂直堆叠的。

<div class="container mt-5">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="form-inline">
                        <div class="form-group mx-sm-3 mb-2">
                            <select class="form-control form-control-sm">
                                <option>One</option>
                                <option>Two</option>
                                <option>Three</option>
                            </select>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input class="form-control" type="text">
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="form">
                        <div class="form-group mx-sm-3 mb-2">
                            <select class="form-control form-control-sm">
                                <option>One</option>
                                <option>Two</option>
                                <option>Three</option>
                            </select>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input class="form-control" type="text">
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这里有一个 codeply project 这样您就可以看到布局。