html - 如何在输入框前添加文字

Question

我在尝试将文本添加到输入字段的左侧和标签下方时遇到问题。
我正在使用 Bootstrap 4.3.1。我的 html 看起来像这样:

<div class="col-lg-6 col-md-6 col-sm-6">
<!-- some markup in here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
    <div class="row">
        <label>Sensor URI:</label>
            http://<input value="" type="text" id="sensor_uri" min="15" max="1440" class="form-control" required/>
    </div>
</div>

它看起来像这样:

我尝试了各种方法，例如将“http://”包含在不同的元素( <p> 、 div> 等)中，但没有成功。理想情况下，我希望像这样在输入字段前面加上“http://”，以便用户无法编辑它:

我该怎么做？

Answer 1

你需要做两件事——

使用 form-control-inline输入上的类，因此它将与“http://”文本

一致显示

将输入和文本包裹在块元素中，例如 <div>使其显示在标签下方的单独一行中。

注意 - 你有一个额外的 row div 没有任何 col s - 这是无效的，所以我在下面删除了它。

在此处查看工作片段:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-lg-6 col-md-6 col-sm-6">
  <!-- some markup in here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
  <label>Sensor URI:</label>
  <div class="inputwrapper">http:// <input value=" " type="text " id="sensor_uri " min="15 " max="1440 " class="form-control-inline" required/>
    </div>
</div>