使输入文本响应式

Posted 2023-04-18

【中文标题】使输入文本响应式

【英文标题】：Making input text responsive

【发布时间】：2020-01-02 00:57:10

【问题描述】：

我需要使文本输入字段具有响应性。目前，它与其他输入元素的宽度匹配，但是当我减小屏幕尺寸时，输入字段没有相应响应。

<div class="col-sm-12">
<div class="col-sm-8">
<table border="0"  id="dynamic_field">  
          <tr>  
          <td><input type="text" placeholder="Digite o link da arquitetura" class="form-control"
            id="txt-link[]" name="txt-link[]" value="old('txt-link[]')" style="width: 730px;">
            @if($errors->has('txt-link.0'))
              @foreach ($errors->get('txt-link.0') as $message)
                <span class="help-block" style="margin-top:5px; margin-bottom:-5px; color:rgb(170, 56, 56)"><b>  $message </b></span>
              @endforeach  
            @endif  </td>  
            <td><button type="button" name="add" id="add" 
            <a class="btn btn-primary"><i class="fa fa-plus"></i>
            </a></button></td>  
                </tr>  
          </table>  
</div>
</div>

【参考方案1】：

您不应该固定宽度。删除style="width: 730px;"

你必须给你的表格宽度100%。在 Bootstrap 4 中有一个类 w-100 可以做到这一点。

<table border="0"  id="dynamic_field" class="w-100"> 
----
</table>

我认为它会解决你的问题。

【讨论】：

感谢您的回答。实际上，它没有用。当我应用建议的解决方案时，宽度减少了很多。我需要保持该字段的宽度与表单中其他字段的宽度相同。

我用你的代码解决了你的问题。给我jsfiddle。