【问题标题】：two vertical inputs share a common button两个垂直输入共享一个公共按钮
【发布时间】：2021-11-12 01:47:30
【问题描述】：

我有一个表格，其中有 n 个可用的表格字段。仅对于 2 个输入，我想共享一个通用按钮而不影响其余布局，但它没有像通用那样正确对齐。

Here 是我尝试过的。前两个输入字段应该有共同的按钮

<div class="container">
<div class="row">
  <div class="col">
<div class="form-group pt-4">   
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">   
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
<div class="form-group">
   
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
</div>  
   <div class="col">
     <button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button> 
  </div>
  </div>

【问题讨论】：

常用按钮是什么意思？你能附上一张你想要的照片吗？
按钮的高度应与 2 个输入字段匹配

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

我假设您希望将两个输入元素的按钮居中。是这样，您可以尝试display:table 换成.row，这可能会解决您的问题。

.row {
  display: table;
  width: 100%;
}
.row .col{
  display: table-cell;
}

.col1 {
  width: 40%;
}

.col2 {
  position: relative;
  vertical-align: top;
}

.col2 button {
  position: absolute;
  top: 30px;
  left: 0;
}

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" >
</head>
<body>
<div class="container">
<div class="row">
  <div class="col col1">
<div class="form-group pt-4">
   
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
   
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
   <div class="form-group">
   
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
</div>
 
  
   <div class="col col2">
     <button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button> 
  </div>
  </div>
  </div>
  </body>
  </html>

但是，如果您想增加按钮的大小，您可以随时为按钮添加内边距或设置高度。

代码笔link

【讨论】：

【解决方案2】：

纯bootstrap 4 实现将是下面的。

您必须将两个输入组合到一个 .col 和按钮到另一个 .col 和 flex-grow-0 flex-shrink-1 mb-3 d-flex 以将容器缩小到按钮宽度的最小值并在底部有足够的边距。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="row">
        <div class="col">
          <div class="form-group pt-4">
            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
          </div>
        </div>
        <div class="col flex-grow-0 flex-shrink-1 mb-3 d-flex">
          <button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
        </div>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
    </div>
  </div>
</div>

【讨论】：

@G.L.P 如果这是您要查找的内容，请批准此答案。很高兴也能获得支持。

【解决方案3】：

引导程序中的col-auto 4.0.0 没有padding。并且可能还有其他一些错误。您最好使用最新版本的 bootstrap 4。它是版本4.6.0

使用两个.row。第一个 .row 用于前两个输入和按钮，第二个 .row 用于其余输入。

对包含按钮的列使用.col-auto 和.d-flex，以使其在所需的空间和全高处占据尽可能多的空间

使用.mb-3 作为按钮，因为.form-group 有那么多的margin-bottom。

您可以使用.btn-outline-secondary 代替.btn-secondary

  <div class="col-auto d-flex ">
      <button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
  </div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <div class="form-group pt-4">
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
    </div>

    <div class="col-auto d-flex">
      <button type="submit" class="btn btn-outline-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div class="form-group">
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
    </div>
  </div>

?

这样做可以避免.row 和.col 的多重嵌套。

【讨论】：

【解决方案4】：

这是另一种方法，也重新考虑了仅使用 BS 类进行样式设计的结构

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col  ">
      <div class="form-group pt-4">
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
    </div>
    <button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
  </div>
  <div class="form-group row pl-3">
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
</div>

【讨论】：

它有效。但是您不遵循引导程序的约定。
@mahan 不，我遵循 flex 的可能性，属性和 BS 主要建立在 flex 之上。