HTML / Bootstrap选择元素

Question

如何设置select元素看起来像列表？像这样：

抱歉，我只是个新手。 TIA。

Answer 1

您需要启用＆＃34;多个＆＃34; select元素中的功能：

＆＃13;

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一个例子

Bootstrap v3.7 对于具有<select>属性的multiple控件，默认情况下会显示多个选项。

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

＆＃13;

＆＃13;

＆＃13;

你可以学习https://getbootstrap.com/docs/3.3/css/#forms

Bootstrap (Currently v4.0.0-beta)

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<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>

＆＃13;

＆＃13;

＆＃13;

您可以了解https://getbootstrap.com/docs/4.0/components/forms/#form-controls

Answer 3

在size代码中使用select属性。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<select size="7" class="form-control w-100">
  <option selected>John</option>
  <option>Paul</option>
  <option>Ringo</option>
  <option>George</option>
</select>

＆＃13;

＆＃13;

＆＃13;