Question

我的应用程序中有一个使用Bootstrap的搜索表单。它是垂直形式，表示标签在输入控件上方。在我的示例中，我有两个输入，然后有一个“搜索”按钮。目的是使按钮与输入垂直对齐。

以下是一些标记（以Plunker开始-请确保您充分演示了窗格）：

  <div class="row">
    <div class="col-sm-4">
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" class="form-control" id="firstName">
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" class="form-control" id="lastName">
      </div>
    </div>
    <div class="col-sm-4">
      <button type="submit" class="btn btn-primary">Search</button>
    </div>
  </div>

如预期的那样，由于包含按钮的第三列的内容不包含<label>（或.form-group元素），因此按钮将与第一行中的标签对齐顶部两列。

一个明显的解决方案是使按钮列的标记与其他两个匹配，如下所示：

    <div class="col-sm-4">
      <div class="form-group">
        <label>&nbsp;</label>
        <div>
          <button type="submit" class="btn btn-primary">Search</button>
        </div>
      </div>
    </div>

需要所有这些额外的标记是很讨厌的。

有没有更好的方法来实现这一目标？

Answer 1

您可以通过将align-items-end （相当于align-items: flex-end）放在.row类中，并删除{{1} } s删除边距，以便所有内容都从结尾开始

还有一件事，您需要将form-group放在align-items-end中，因为row的样式为row，这就是为什么它可以工作的原因。

display: flex

Answer 2

您可以为该按钮div设置一个类，并向其中添加CSS

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),

        // my attempt
        new HtmlWebPackPlugin({ 
            template: "./src/About.html",
            filename: "./About.html"
        })
    ]
};

.button-class{
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-end;
}

这是现场demo

希望它会有所帮助：）

Answer 3

为目标找到的最佳方法是在包装按钮的列中结合使用d-flex类align-items-end。另外，您还需要将按钮放在form-group div内，因为它会增加一些边距，总之，这将是包装按钮的结构：

<div class="col-sm-4 d-flex align-items-end">
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Search</button>
  </div>
</div>

完整示例：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-sm-4">
    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" class="form-control" id="firstName">
    </div>
  </div>

  <div class="col-sm-4">
    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" class="form-control" id="lastName">
    </div>
  </div>
  
  <div class="col-sm-4 d-flex align-items-end">
    <div class="form-group">
      <button type="submit" class="btn btn-primary">Search</button>
    </div>
  </div>

</div>
</div>

以Bootstrap形式正确对齐相邻按钮

3 个答案: