我想看起来像是语言标签并在同一行中选择选项,但是我无法使用bootstrap col-md-6在同一行中将它们放在同一行中,整个表格被分隔为同一行内的col-sm-6列。
正如您在图像语言标签上看到的,并且select在同一行上看起来不像,彼此之间相距很远,并且select字段缩小了。如何使它们在同一行上看起来正常?

javascript - 如何将 Material 选择和标签并排放置在同一行中-LMLPHP

这是我在下面尝试的:

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

最佳答案

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

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


演示Stackblitz

关于javascript - 如何将 Material 选择和标签并排放置在同一行中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58172423/

10-09 21:27