我有一個表單，其中有n個可用的表單欄位。只有2個輸入，我想在不影響其余布局的情況下共享一個公共按鈕，但它沒有像公共按鈕那樣正確對齊。

這里是我所嘗試的。前兩個輸入欄位應該有共同的按鈕

<div class="container">/span>
<div class=" row">
  <div class="col">/span>
<div class="form-group pt-4"/span>>   
    < input type="text"/span> class="form- 控制" id="inputAddress" placeholder="1234 Main St"> 
  </div> 
  <div class="form-group">    
    < input type="text"/span> class="form- 控制" id="輸入地址2" placeholder="公寓。studio, or floor"> 
  </div> 
<div class="form-group"> 
   
    < input type="text"/span> class="form- 控制" id="輸入地址2" placeholder="公寓。studio, or floor"> 
  </div> 
</div>/span>  
   <div class="col"> 
     < button type="submit" class=> < i class="fas fa-ellipsis-v"/span>> </i></button>  
  </div>
  </div>/span>

uj5u.com熱心網友回復：

我假設你想讓兩個輸入元素的按鈕居中。是這樣嗎，你可以試試display:table的.row，這可能已經解決了你的問題。

。

span class="hljs-selector-class">.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"/span>>
   
    < input type="text"/span> class="form- 控制" id="inputAddress" placeholder="1234 Main St"> 
  </div> 
  <div class="form-group"> 
   
    < input type="text"/span> class="form- 控制" id="輸入地址2" placeholder="公寓。studio, or floor"> 
  </div> 
   <div class="form-group"> 
   
    < input type="text"/span> class="form- 控制" id="輸入地址2" placeholder="公寓。studio, or floor"> 
  </div> 
</div>/span>
 
  
   <div class="col col2"> 
     < button type="submit" class=> < i class="fas fa-ellipsis-v"/span>> </i></button>  
  </div>
  </div>/span>
  </div>/span>
  </body> 
  </html>/span>

但是，如果你想增加按鈕的尺寸，你可以為按鈕添加填充或設定高度。

Codepen 鏈接

uj5u.com熱心網友回復：

純粹的bootstrap 4暗示將是下面這個。

你必須將兩個輸入分組到一個單一的.col和按鈕到另一個.col，用flex-grow-0 flex-shrink-1 mb-3 d-flex將容器縮小到按鈕的最小寬度，并在底部有足夠的空白。

。

< link rel="styleheet" href="https: //maxcdn. bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">/span>
<div class="container"> 
  <div class=" row">
    <div class="col">/span>
      <div class="row"> 
        <div class="col">/span>
          <div class="form-group pt-4"/span>>
            < input type="text"/span> class="form- 控制" id="inputAddress" placeholder="1234 Main St"> 
          </div> 
          <div class="form-group"> 
            < input type="text"/span> class="form- 控制" id="輸入地址2" placeholder="公寓。studio, or floor"> 
          </div> 
        </div>/span>
        <div class="col flex-grow-0 flex-shrink-1 mb-3 d-flex"/span>>
          < button type="submit" class="btn btn-secondary mt-4" /span>> < i class="fas fa-ellipsis-v"/span>> </i></button> 
        </div>
      </div>/span>
      <div class="form-group"> 
        < input type="text"/span> class="form- 控制" id="輸入地址2" placeholder="公寓。studio, or floor"> 
      </div> 
    </div>/span>
  </div>/span>
</div>/span>

uj5u.com熱心網友回復：

col-auto在bootrap 4.0.0中沒有padding。而且還可能有一些其他的錯誤。你最好使用bootstrap 4的最新版本。它是4.6.0

版本。

使用兩個.row。第一個.row用于前兩個輸入和按鈕，第二個.row用于其他的輸入。

使用.col-auto和.d-flex用于包含按鈕的那一列，使其占用盡可能多的空間和全高

。

為按鈕使用.mb-3，因為.form-group有那么大的下邊距

。

你可以使用.btn-outline-secondary而不是.btn-secondary

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

<link href="https://cdnjs. cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="styleheet" /> 
< link rel="styleheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l"/span> crossorigin="anonymous"/span>> 

<div class="container"> 
  <div class=" row">
    <div class="col">/span>
      <div class="form-group pt-4"/span>>
        < input type="text"/span> class="form- 控制" id="inputAddress" placeholder="1234 Main St"> 
      </div> 
      <div class="form-group"> 
        < input type="text"/span> class="form- 控制" id="輸入地址2" placeholder="公寓。studio, or floor"> 
      </div> 
    </div>/span>

    <div class="col-auto d-flex">/span>
      < button type="submit" class="btn btn-outline-secondary mt-4 mb-3" > < i class="fas fa-ellipsis-v"/span>> </i></button> 
    </div>
  </div>/span>
  <div class="row"> 
    <div class="col-12"> 
      <div class="form-group"/span>>
        < input type="text"/span> class="form- 控制" id="輸入地址2" placeholder="公寓。studio, or floor"> 
      </div> 
    </div>/span>
  </div>/span>

326610.html
標籤：

上一篇：如何在C 中列印模板型別名？[復制]
下一篇：動態搜索欄的結果沒有顯示在我的頁面上？

兩個垂直輸入端共用一個按鈕

(adsbygoogle = window.adsbygoogle || []).push({}); 轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/326610.html 標籤： 上一篇：如何在C 中列印模板型別名？[復制]下一篇：動態搜索欄的結果沒有顯示在我的頁面上？

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/326610.html
標籤：

上一篇：如何在C 中列印模板型別名？[復制]
下一篇：動態搜索欄的結果沒有顯示在我的頁面上？