HTML /引导选择元素

Question

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

，对不起，我只是个新手。 TIA。

Answer 1

使用size属性select标记。

<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>

Answer 2

您需要启用选择元素 “多” 特点：

<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>

Answer 3

这是一个例子

Bootstrap v3.7 为了与multiple属性，多<select>控制选项默认显示。

<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>

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

Bootstrap (Currently v4.0.0-beta) 

<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>

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