調整Bootstrap 4中的輸入大小

Question

似乎select元素和input元素的寬度相等。 我怎樣才能使input元素占用更多空間並select占用更少的空間？

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <select class="custom-select" id="inputGroupSelect03"> <option selected>Choose...</option> <option value="1">One</option> </select> <input class="form-control"> </div> 

Answer 1

您需要在選擇中添加col- *類

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <select class="custom-select col-3" id="inputGroupSelect03"> <option selected>Choose...</option> <option value="1">One</option> </select> <input class="form-control col"> </div> 

.input-group已經.row風格所以不需要給.row類。 如果你給.row然后它給出了不需要的負余量。

Answer 2

嘗試在select和input中添加col-*類：

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="input-group mb-3 row"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <select class="custom-select col-4" id="inputGroupSelect03"> <option selected>Choose...</option> <option value="1">One</option> </select> <input class="col-8 form-control"> </div>