如何在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

添加到这个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;
}

mycustom在你的input-group班级中有一个 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;
}

Answer 2

只是让.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>