时间戳

首页 > 解决方案 > Boostrap 和 Html - 为什么一个输入框是全宽的而其他输入框那么短？

html - Boostrap 和 Html - 为什么一个输入框是全宽的而其他输入框那么短？

问题描述

为什么一个输入框是全宽的，而其他的那么短？这是我的html。我正在使用引导程序：

                <form action="https://www.example.net/auth/create_user" class="form-horizontal" id="login-attempts-form-admin method="post" accept-charset="utf-8">

                <div class="container">
                    <div class="row">        
                     <div class="col-sm-6 col-xs-6">   

                        <!-- id -->
                        <div class="form-group">     
                            <label for="id">
                                Reference Id
                            </label>
                            <div class="input-group">
                            <input type="text" name="id" value="" id="id" style="" class="form-control" placeholder="" disabled="disabled"  />
                                <div class="input-group-addon"><i class="ti-info"></i>
                                </div>
                            </div> <!-- end input group -->
                            <span class="help-block">
                                The Reference Id is created automatically.
                            </span>
                        </div> <!-- end form-group Id -->


                        <!-- ip_address -->
                        <div class="form-group">
                            <label for="ip_address">
                                IP Address
                            </label>
                            <div class="input-group">
                            <input type="text" name="ip_address" value="" id="ip_address" style="max-width:none !important" class="form-control input-xlarge" placeholder=""  />
                            </div> <!-- end input group --> 
                        </div> <!-- end form-group ip_address -->

                        <!-- login -->
                        <div class="form-group">
                            <label for="login">
                                Login
                            </label>
                            <div class="input-group">
                            <input type="text" name="login" value="" id="login" style="" class="form-control" placeholder=""  />
                            </div> <!-- end input group -->
                        </div> <!-- end form-group login -->
                        </div>
                    </div> <!-- end of row -->        
                </div> <!-- end of container. -->

                </form>

我什至试图通过声明 style="max-width:none !important" 来使 ip_address 字段更宽，但没有用。有什么办法可以让领域更广吗？引导程序中是否有预设宽度？我相信默认值是最大宽度。

这是我的最终输出的样子：

在此处输入图像描述

标签： htmltwitter-bootstrap

解决方案

当我测试代码时，我没有看到输入的宽度有任何不同。

在 ip_address 字段中，我使用的是 style="max-width:none !important"... 您添加的任何 CSS 都不适用于内联样式 max-width:none; ！重要的。

它将覆盖您在 CSS 文件或其他任何地方所做的任何更改。内联样式尤其是 !important 将覆盖任何附加的样式表或类。

我认为问题可能是你的输入有这个style="max-width:none !important"它覆盖了默认的引导设置，而不是将你的输入设置为最大宽度。

那就是如果您希望它们更宽、更短的包装，<div>然后<div>使用 CSS 或“col-sm-6”等..类来操作。

来自 Bootstrap 网站版本 4 的示例。此外，版本 3 也具有“表单控制”类。它使您的表单具有 100% 的宽度，然后您可以通过包装<div>您选择的或其他合适的元素或 CSS 来操作它。

例子：

    <form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

https://getbootstrap.com/docs/4.0/components/forms/

推荐阅读