Question

我正面临着Bootstrap的奇怪行为。

当我使用CSS过渡或jQuery动画更改textarea的宽度时，它会扩展到视口之外，直到动画完成。

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="navbar-text">


              <form>
                <div class="form-group">
                  <textarea class="form-control"></textarea>
                </div>
              </form>


            </li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

CSS

textarea {
  width:100px;
}
textarea:focus {
  transition: 2s all;
  width:500px;
}

这是一个演示小提琴： https://jsfiddle.net/hqm9urey/2/

我只能用float来重现它：对： https://jsfiddle.net/05ba14bs/1/

HTML

<div>
  <textarea></textarea>
</div>

CSS

div {
  float:right;
}
textarea {
  width:100px;
}
textarea:focus {
  transition: 2s all;
  width:500px;
}

Answer 1

将其包含在父div中，并为此父div提供最大宽度和一些填充。有关更多信息，请参阅JSFiddle：

No more overflow JSFiddle

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Textarea:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

CSS

textarea
{
  width:100%;
}
.textwrapper
{
  position: block;
  margin:5px 0;
  padding:0px 10px;
  overflow-x:hidden;
}
textarea:focus { 
  transition: 2s all;
  max-width:100%;
  width: 1000000px;
}

当转换更改宽度时，引导文本区域超出视口

1 个答案: