如何在输入字段前添加文本

debugcn 发表于 Dev

吉尼亚提乌斯

我在尝试在输入字段的左侧和标签下方添加文本时遇到麻烦。

我正在使用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：//”，以便用户无法对其进行编辑：

我该怎么办？

蓬松的小猫

您需要做两件事-

form-control-inline在输入中使用该类，以便该类与“ http：//”文本一致
将输入和文本包装在块元素（例如中）中，<div>以使其在标签下方的单独行中显示。

注意-您有一个row没有任何cols的多余div-这是无效的，因此我在下面将其删除。

在此处查看有效的代码段：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。