Question

我正在尝试使用dropdown-input-button创建引导内联形式。我能够做到这一点，但我如何制作100％宽度的输入标签？下面的代码段。

<div class="row">
  <div class="col-md-12">
    <div class="form-inline">
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>
          </li>
          <li><a href="#">Another action</a>
          </li>
          <li><a href="#">Something else here</a>
          </li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a>
          </li>
        </ul>
      </div>
      <div class="form-group">
        <input type="text" class="form-control " placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Search</button>
    </div>
  </div>
</div>

小提琴：https://jsfiddle.net/xt4zk62v/

Answer 1

您需要创建一个类并将其应用于父div，为其添加宽度并将输入的宽度更新为100％;

@media (min-width: 768px){
.form-inline .form-control {
display: inline-block;
width: 100%;
vertical-align: middle;
} 
}

https://jsfiddle.net/t3xd3esq/4/

Bootstrap的输入宽度在form-inline内100％

1 个答案: