Question

为什么一个输入框全角，而其他输入框这么短？这是我的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字段变宽，但没有用。有什么方法可以扩大领域？引导程序中是否有预设宽度？我相信默认值是最大宽度。

这是我最终的输出结果：

Answer 1

当我测试代码时，输入的宽度没有变化。

在ip_address字段上，我正在使用style =“ max-width：none！important” ...您添加的任何CSS都不能与内联样式max-width：none一起使用；！重要。

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

我认为问题可能出在您的输入style="max-width:none !important"上，它覆盖了默认的引导程序设置，而不是将输入设置为最大宽度。

那是如果您希望它们在<div>中更宽，更短的环绕，然后使用CSS或“ col-sm-6”等类来操纵<div>。

来自Bootstrap网站版本4的示例。此外，版本3也具有“ form-control”类。它使表单的宽度为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/

Answer 2

要添加为注释的低代表，但尝试以相同长度的输入字段结束代码。所以从我的角度来看没有问题。一件事可能是您正在使用的引导程序版本，就像我从“引导程序”页面（4.1.3）中使用了最新版本一样，这是因为较旧的版本可能在CSS中有所更改。您可以添加CSS，如果不进行任何更改，它将提供更好的视图。另一件事是尝试：

input {
    max-width: 100%;
}

Answer 3

我测试输入字段的长度没有什么不同。
但是，如果发生这种情况，请尝试使用

设置输入标签的样式

    <input style="max-width: 100%">

或将此添加到CSS

Boostrap和HTML-为什么一个输入框是全宽的而其他输入框却这么短？

3 个答案: