如何将材料选择和标签并排放在同一行

Question

我想在同一行中显示语言标签和选择选项。但我无法使用 bootstrap col-md-6 将它们放在同一行中。整个表单在行内被分隔为相同的 col-sm-6 列。正如你在图像语言标签上看到的，选择看起来不像在同一行，彼此相距很远，选择字段缩小了。如何使它们在同一行看起来正常？这是我在下面尝试的：<div class="row" style="margin-left:10px;">          <div class="col-sm-6">            <ul class="list-unstyled">              <li>                <div class="row">                  <div class="col-md-6">                      <h4>Language:</h4>                  </div>                  <div class="col-md-6" style="text-align:left">                      <mat-form-field>                          <select matNativeControl required>                            <option value="english">English</option>                            <option value="german">German</option>                          </select>                        </mat-form-field>                  </div>                </div>              </li>            </ul>            <div class="col-sm-6">            ...other form elements            </div>          </div>

Answer 1

将以下内容替换为您的h4标签

    <h4 style="display:inline">Language:</h4>

演示堆栈闪电战