Question

我需要将文本输入字段放在内联中，并将textarea放在一个全尺寸的新行中。

我可以使用默认的Bootstrap样式吗？

<form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Name">
  </div>
   <div class="form-group">
    <input type="text" class="form-control" placeholder="Email">
  </div>
   <div class="form-group">
    <input type="text" class="form-control" placeholder="Subject">
  </div>
   <div class="form-group">
    <textarea class="message"></textarea>
  </div>
</form>

Answer 1

替换：

<textarea class="message"></textarea>

使用：

<textarea class="form-control message"></textarea>

Answer 2

是的，您可以在不编写任何其他CSS代码的情况下完成此操作。

HTML标记

<form class="row" role="from">
  <div class="form-group col-sm-4 col-xs-12">
    <input type="text" class="form-control" placeholder="Name">
  </div>
  <div class="form-group col-sm-4 col-xs-12">
    <input type="email" class="form-control" placeholder="Email">
  </div>
  <div class="form-group col-sm-4 col-xs-12">
    <input type="text" class="form-control" placeholder="Subject">
  </div>
  <div class="form-group col-xs-12">
    <textarea class="form-control" class="message" rows="5"></textarea>
  </div>
</form>

DEMO

希望这有帮助。

Bootstrap只生成几个内联元素

2 个答案: