如何在Bootstrap的輸入字段中放置提交按鈕

Question

我想要像這樣的東西，我怎么能完成這個任務：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <form> <div class="col-lg-10 mb-3"> <div class="input-group"> <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required> <div class="input-group-prepend"> <input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2"> </div> </div> </div> </form> 

Answer 1

只需使.input-group-prepend類position:absolute

要防止覆蓋引導程序樣式， .input-group-prepend重命名為其他名稱

 .input-group-prepend { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <form> <div class="col-lg-10 mb-3"> <div class="input-group"> <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required> <div class="input-group-prepend"> <input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2"> </div> </div> </div> </form> 

Answer 2

添加到此CSS

.mycustom {
    border: solid 1px green;
    position: relative;
}
.mycustom input[type=text] {
    border: none;
    width: 100%;
    padding-right: 123px;
}
.mycustom .input-group-prepend {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;z-index:9;
}

在input-group類中使用一個css mycustom類

像這樣

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><style>.mycustom { border: solid 1px green; position: relative; } .mycustom input[type=text] { border: none; width: 100%; padding-right: 123px; } .mycustom .input-group-prepend { position: absolute; right: 4px; top: 4px; bottom: 4px;z-index:9; }</style> <form> <div class="col-lg-10 mb-3"> <div class="input-group mycustom"> <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required> <div class="input-group-prepend"> <input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2"> </div> </div> </div> </form> 

Answer 3

請參閱此bootstrap的文檔http://getbootstrap.com/components/#input-groups ：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-default" type="submit">
        <i class="fa fa-search"></i>
    </button>
  </span>
</div>