Question

我想将带有按钮的文本框水平放置在网格系统中，但是按钮不想垂直对齐。（它必须在网格系统中，因为在移动设备的情况下，我希望将这些项目堆叠在一起）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">

    <div class="col"></div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="First name">
    </div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="Last name">
    </div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="Last name">
    </div>

    <div class="col-sm-2">
        <button type="submit" class="btn btn-primary">Sign in</button>  
    </div>

    <div class="col"></div>

</div>

编辑：我以这种方式解决了这个问题：

<div class="row">
    <div class="col"></div>
    <div class="col-sm-2 py-0 px-1">
        Last name:
        <input type="text" class="form-control form-control-sm mb-2" 
        placeholder="Last name">
    </div>
    <div class="col-sm-2 py-0 px-1">
        First name:
        <input type="text" class="form-control form-control-sm mb-2" 
        placeholder="First name">
    </div>
    <div class="col-sm-2 py-0 px-1">
        Card ID:
        <input type="text" class="form-control form-control-sm mb-2" 
        placeholder="Card ID">
    </div>
    <div class="col-sm-2 py-0 px-1">
        <button type="button" class="btn btn-sm btn-success btn-block mt-4 
        mb-2">Add</button>
    </div>
    <div class="col"></div>
</div>

Answer 1

创建一个新类“ abc”，并将其添加到包含按钮的div中：

.abc{
  position:absolute;
  bottom:0;
}

希望这是您需要的：

.abc{
position:absolute;
bottom:0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">

    <div class="col"></div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="First name">
    </div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="Last name">
    </div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="Last name">
    </div>

    <div class="col-sm-2">

        <button type="submit" class="btn btn-primary abc">Sign in</button>  
    </div>

    <div class="col"></div>

</div>

Answer 2

请使用下面的css类vcenter，它将使元素的所有子元素与此类垂直和水平对齐。

.vcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">

  <div class="col"></div>

  <div class="col-sm-2">
    <label for="inputEmail4">Email</label>
    <input type="text" class="form-control" placeholder="First name">
  </div>

  <div class="col-sm-2">
    <label for="inputEmail4">Email</label>
    <input type="text" class="form-control" placeholder="Last name">
  </div>

  <div class="col-sm-2">
    <label for="inputEmail4">Email</label>
    <input type="text" class="form-control" placeholder="Last name">
  </div>

  <div class="col-sm-2 vcenter">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>

  <div class="col"></div>

</div>

按钮的垂直对齐

2 个答案: