Question

我有一个电子邮件表单并且已经包含了bootstrap的标签输入功能，这要归功于我发现的一个很棒的代码：

我的外部参考是：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

然后我的电子邮件输入中包含以下HTML格式：

<div class="formGroupContainer green">
  <div class="form-group">
     <label for="toAddress"><i class="fa fa-envelope" aria-hidden="true"></i> To: Email address</label>
        <input type="text" data-role="tagsinput" multiple="multiple" name="toAddress" class="form-control" id="tags" aria-describedby="emailHelp" value=<?=toEmail?>>
</div>

它工作得很漂亮。但是，我真正想要覆盖的一件事是，当您开始在文本区域中键入时，输入框会根据键入的字符数动态地突然改变宽度。当您删除电子邮件地址时，该框变得很小，显然这看起来有点混乱。

我在浏览器的开发工具中检查了该元素，并注意到一个属性，其中占位符大小=＆＃34; 1＆＃34; ...当我在开发工具中将其更改为40时，例如，我再次获得了全宽。

所以我的问题是如何阻止这种情况发生。我只是希望输入的设置宽度为250px，而不是根据内部的变化而改变。我试过了：

    #toAddress {
       min-width: 250px !important;
       size: 40;
    }

但没有运气。有什么想法吗？

Answer 1

您正在尝试将宽度应用于错误的元素。另外，如果你不想改变宽度，你应该只应用width属性而不是min-width。

应该是：

#tags{
       width: 250px !important;
       size: 40;
    }

Answer 2

您可以使用row和col div类功能来构建表单。

所以对于你的代码：

<div class="row">
<div class="form-group col-lg-1">
   <label for="toAddress"><i class="fa fa-envelope" aria-hidden="true"></i> 
  To: Email address</label>
    <input type="text" data-role="tagsinput" multiple="multiple" name="toAddress" class="form-control" id="tags" aria-describedby="emailHelp" value=<?=toEmail?>>
</div>
</div>

Answer 3

啊哈，我解决了它：）

很简单！我只需要按如下方式应用我的CSS：

input {
  width: 250px !important;
}

干杯球员

Bootstrap tagsinput - 停止输入框动态改变大小

3 个答案: