Question

我需要在同一行上删除Label和下拉列表。我使用bootstrap，我的html就是那样

＆＃13;

<div class="row">
   <div class="col-md-2>
      <label>Users:</label>
      <select class="form-control">
         <option value="">Select User</option>    
         <option *ngFor="let u of UsersList"       [ngValue]="u.UserId">{{u.FullName}}</option>
      </select>
   </div>
</div>

＆＃13;

Answer 1

使用＆＃39; for＆＃39;标签的属性：

＆＃13;

<div class="row">
   <div class="col-md-2>
      <label for="sel-options">Users:</label>
      <select id="sel-options" class="form-control">
         <option value="">Select User</option>    
         <option *ngFor="let u of UsersList"       [ngValue]="u.UserId">{{u.FullName}}</option>
      </select>
   </div>
</div>

＆＃13;

Answer 2

您需要在html中进行一些更改

在表单中添加 form-horizontal 类，并执行以下html代码

<div class="row">

<form class="form-horizontal">


<div class="form-group">
                <label for="exampleInputuname" class="col-sm-3 control-label">Select User</label>
                <div class="col-sm-9">
                  <div class="input-group">
                    <select class="form-control">
                      <option value="">Select User</option>
                      <option *ngFor="let u of UsersList" [ngValue]="u.UserId">{{u.FullName}}</option>
                    </select>
                    <div class="input-group-addon"><i class="ti-user"></i></div>
                  </div>
                </div>
              </div>
</form>
</div>

希望这能帮到你

Answer 3

正如文档页面CSS Bootstrap（强调我的）所述：

Bootstrap需要包含元素来包装网站内容并容纳我们的网格系统。您可以选择在您的项目中使用两个容器中的一个。

使用 .container 作为响应式固定宽度容器。

使用 .container-fluid 作为全宽容器，跨越视口的整个宽度。

所以你的html代码应该是：

    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <label>Users:</label>
                <select class="form-control">
                    <option value="">Select User</option>    
                    <option *ngFor="let u of UsersList" [ngValue]="u.UserId">{{u.FullName}}</option>
                </select>
            </div>
        </div>
</div>

在同一行显示标签和下拉列表

3 个答案: