如何在Bootstrap的输入字段中放置提交按钮 [英] How can i place submit button inside input field in Bootstrap

问题描述

我想要这样的东西，以及如何完成此任务：

 < link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/4.0。 0 / css / bootstrap.min.css完整性= sha384-Gn5384xqQQ1aoWXA + 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- describeby = inputGroupPrepend2必需> < div class = input-group-prepend> < input type = submit vlaue = submit class = btn btn-primary btn-sm rounded-0 id = inputGroupPrepend2> < / div> < / div> < / div>< / form>  

解决方案

添加到此CSS

  .mycustom {
 border ：纯1像素绿色； 
职位：相对； 
} 
 .mycustom input [type = text] {
 border：none; 
宽度：100％； 
 padding-right：123px; 
} 
 .mycustom .input-group-prepend {
 position：absolute; 
右边：4px； 
 top：4像素； 
 bottom：4px; z-index：9; 
} 
  

有一个css mycustom 您的输入组类中的类

像这样

< pre class = snippet-code-html lang-html prettyprint-override> < link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/ css / bootstrap.min.css完整性= sha384-Gn5384xqQQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXm crossorigin = anonymous< style = gt; .type [mycustom] {我的客户：边框：1。文字] {边框：无；宽度：100％；填充右：123px；}。mycustom .input-group-prepend {位置：绝对；右：4px；顶部：4px；底部：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- describeby = inputGroupPrepend2必需> < div class = input-group-prepend> < input type = submit vlaue = submit class = btn btn-primary btn-sm rounded-0 id = inputGroupPrepend2> < / div> < / div> < / div>< / form>

I want Something Like this and how can I achieve this task:

<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>

解决方案

add to this 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;
}

with one css mycustom class in your input-group class

like this

<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>

这篇关于如何在Bootstrap的输入字段中放置提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！