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

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标签&nbsp;&nbsp;&nbsp;&nbsp;<h4&nbsp;style="display:inline">Language:</h4>演示堆栈闪电战