Question

我正在处理水平的引导程序表单，我无法发现为什么我的标签和表单组之间存在太多空格，请参阅

这是我目前的代码：

   <div>
        <h2 class="text-center"> Table Styles </h2>
        <div class="form-group">
            <label for="rows" class="control-label col-md-3">current Styles:</label>
            <div class="col-md-4">
                <select class="form-control" v-model="tableStyle">
                    <option v-for="(item,index) in tableStyles">
                        {{ item }}
                    </option>
                </select>
            </div>
     </div>

我在div上面有一个水平的表单，因为我正在使用vue它正在调用一个组件，不用担心：）

Answer 1

 <div>
        <h2 class="text-center"> Table Styles </h2>
        <div class="form-group">
            <label for="rows" class="control-label col-md-2">current Styles:</label>
            <div class="col-md-3">
                <select class="form-control" v-model="tableStyle">
                    <option v-for="(item,index) in tableStyles">
                        {{ item }}
                    </option>
                </select>
            </div>
     </div>

Answer 2

我准备了一个片段。它在代码段编辑器中正确运行，但在保存时出错。

您的代码，或多或少地修改过，正常工作。照看代码块......

<form>
  <div class="container">
    <div class="form-horizontal">
      <!-- Other stuff -->

      <div>
        <h2 class="text-center"> Table Styles ( col-xs- )</h2>
        <div class="form-group">
          <label for="rows" class="control-label col-xs-3">current Styles:</label>
          <div class="col-xs-4">
            <select class="form-control" v-model="tableStyle">
            <option v-for="(item,index) in tableStyles">{{ item }}</option>
          </select>
          </div>
        </div>
      </div>

      <!-- Other stuff -->
    </div>
  </div>
  </form

.form-horizontal .control-label的Bootstrap CSS应该强制标签右对齐，而不管col-大小调整。

@media (min-width: 768px)
.form-horizontal .control-label {
  padding-top: 7px;
  margin-bottom: 0;
  text-align: right;
  }

如果您使用了浏览器开发人员工具，则在突出显示control-label

时应确保看到上述CSS

标签和表单组之间的空间太大

2 个答案: