如何輸入其容器的全寬？

Question

我在 bootstrap 輸入和鏈接里面有一個框。但是在下面你可以看到，輸入不是全寬的。我怎樣才能讓它滿？

您可以看到輸入和鏈接之間存在間隙。我想制作該間隙而不是輸入寬度。

 .resetToDef{ display: block; width:25.8%; min-width: 178px; border-radius: 4px; border: 1px solid #FF7921; } .resetToDef a{ font-size:12px; color:#FF7921; border: none; text-decoration-line: underline } .resetToDef input{ display:inline-block; width:57px; border:none; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="resetToDef"> <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform"> <a href="" class="float-right btn"> Back to default</a> </div>

Answer 1

只需將內置引導類用於表單輸入組input-group 。

 .resetToDef{ display: block; width:25.8%; min-width: 178px; border-radius: 4px; border: 1px solid #FF7921; } .resetToDef a{ font-size:12px; color:#FF7921; border: none; text-decoration-line: underline } .resetToDef input{ display:inline-block; width:57px; border:none; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="resetToDef input-group"> <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform"> <a href="" class="float-right btn"> Back to default</a> </div>

Answer 2

可以是這樣的：

 .resetToDef{ display: block; width:100%; min-width: 178px; border-radius: 4px; border: 1px solid #FF7921; } .resetToDef a{ font-size:12px; color:#FF7921; border: none; text-decoration-line: underline } .resetToDef input{ display:inline-block; width:80%; border:none; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="resetToDef"> <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform"> <a href="" class="float-right btn"> Back to default</a> </div>

Answer 3

移除給輸入元素的寬度並使 resetToDef 顯示為 flex。

 .resetToDef{ display: flex; width:25.8%; min-width: 178px; border-radius: 4px; border: 1px solid #FF7921; justify-content: space-between; } .resetToDef a{ font-size:12px; color:#FF7921; border: none; text-decoration-line: underline } .resetToDef input{ display:inline-block; border:none; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="resetToDef"> <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform"> <a href="" class="float-right btn"> Back to default</a> </div>

Answer 4

您可以使用 flex 和 flex grow 來實現這一點。

.resetToDef {
    display: flex;
}

.resetToDef input {
    flex-grow: 1;
}

這將做的是將父項設置為 flex 容器，以便直接子項可以使用 flex 屬性。

現在我們將輸入設置為 'flex-grow: 1;'，這將告訴輸入“增長”（占用剩余的可用空間）並完全可用寬度。

不要忘記你的元素有填充，看起來元素沒有占據完整的可用寬度。

Answer 5

.resetToDef - display:flex; 和input - flex:1;

這對你有用。

 .resetToDef { display: flex; width: 25.8%; min-width: 178px; border-radius: 4px; border: 1px solid #FF7921; } .resetToDef a { font-size: 12px; color: #FF7921; border: none; text-decoration-line: underline } .resetToDef input { flex:1; border: none; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="resetToDef"> <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform"> <a href="" class="float-right btn"> Back to default</a> </div>