html – 防止控制继续使用form-inline

2023年6月10日 345次阅读

我正在使用将所有控件放在同一行上的form-inline类,但我注意到当我调整窗口大小时,文本框附近的按钮转到下一行.我想阻止这个.看一下图片：

《html – 防止控制继续使用form-inline》

《html – 防止控制继续使用form-inline》

这是代码：

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-xs-2 hideable-sidebar">
      <div class="well">
        <span><b>Resources</b></span>
        <form class="form-inline">
          <input type="text" placeholder="type text here"
                 class="form-control" id="resource_filter" />
          <button class="clear btn btn-default btn-sm" type="button"
                  title="clean">
            <span class="glyphicon glyphicon-repeat"></span>
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

最佳答案 您将要在输入组下使用Bootstrap
Button Addons.这样它在窗口调整大小期间将保持成比例.确保您的输入和按钮使用相同的大小：

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 hideable-sidebar">
      <div class="well">
        <span><b>Resources</b></span>
        <form class="form-inline">
          <div class="input-group">
            <input type="text" placeholder="type text here" class="form-control" id="resource_filter" />
            <span class="input-group-btn">
              <button class="clear btn btn-default" type="button" title="clean">
                <span class="glyphicon glyphicon-repeat"></span>
              </button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
点赞