将内容与引导程序奇怪的行为对齐

Question

我正在使用 vuejs 和 bootstrap，因此我正在调用不同的组件并将它们动态附加到我的 HTML 中。

我的问题是我没有得到想要的效果，目前我有这个：

部分标题提供了与输入相关的太多空间，我不知道为什么该部分是不同的组件，并且底部的数据会根据选择框的选择动态加载。

行列和单元格是一个水平形式，但它占据了我行的所有宽度，我希望输入更低，并且中心的按钮更大一点，如果我尝试，我无法按照我想要的方式设置它例如增加按钮，它将不再位于中心。

这是我的代码：

<template>
    <div class="container">
        <div class="row">
            <div>
                <h1 class="text-center">Document Creation</h1>
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-6">

                    </div>
                    <div class="col-md-6">

                    </div>
                </div>
            </div>
            <div class="col-md-8 margin-above">
                <div class="form-group">
                    <label class="control-label col-sm-2">Section</label>
                    <div class="col-sm-6">
                        <select class="form-control" v-model="currentView">
                            <option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <!-- Here we load the diferent sections based on the selection choice -->
        <component v-bind:is="currentView">
            <!-- component changes when vm.currentView changes! -->
        </component>
    </div>
</template>

在组件内部，具有行、单元格和列的其他组件的加载方式如下：

<template>
    <div class="row">
        <div class="col-md-offset-4">
            <form class="form-inline margin-above">
                <div class="form-group">
                    <label for="rows">rows:</label>
                    <input type="number" min="1" value="1" class="form-control" id="rows">
                </div>
                <div class="form-group">
                    <label for="columns">columns:</label>
                    <input type="number" min="1" value="1" class="form-control" id="cols">
                </div>
                <div class="form-group">
                    <label for="cells">cells:</label>
                    <input type="number" min="1" value="1" class="form-control" id="cols">
                </div>
                <div class="text-center"> 
                    <button type="submit" class="btn btn-success margin-above2">Add Table</button>
                </div>
            </form>
        </div>
    </div>
</template>

拜托，我需要一些帮助才能正确显示它。谢谢。

Answer 1

目前，您在布局中使用了太多 <div>s。我们可以去掉一些，不仅可以简化设计，还可以让它更容易阅读。我们还想利用引导程序的Horizontal Forms .

你的第一个 sn-p 应该是这样的：

<template>
<div class="container">
    <h1 class="text-center">Document Creation</h1>
    <div class="col-md-12 form-horizontal margin-above">
      <div class="form-group">
         <label class="control-label col-sm-1">Section</label>
         <div class="col-sm-11">
            <select class="form-control" v-model="currentView">
                <option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
            </select>
         </div>
      </div>
    </div>

    <!-- Here we load the diferent sections based on the selection choice -->
    <component v-bind:is="currentView">
    <!-- component changes when vm.currentView changes! -->
    </component>
</div>
<template>

你的第二个看起来像这样：

<template>
     <form class="margin-above">
         <div class="form-group col-sm-4">
            <label for="rows" class="control-label">rows:</label>
            <input type="number" min="1" value="1" class="form-control" id="rows">
         </div>
         <div class="form-group col-sm-4">
             <label for="columns" class="control-label">columns:</label>
             <input type="number" min="1" value="1" class="form-control" id="cols">
         </div>
         <div class="form-group col-sm-4">
             <label for="cells" class="control-label">cells:</label>
             <input type="number" min="1" value="1" class="form-control" id="cols">
         </div>
         <div class="col-xs-12 margin-above text-center">
            <button type="submit" class="btn btn-success margin-above2">Add Table</button>
        </div>
    </form>
</template>

我制作了一个小提琴here 来一起展示sn-ps。

Answer 2

你会遇到问题trying to use Boostrap and Vue together，但这是另一天的问题。

通过仔细模仿examples here，您可以获得间距更佳的section 布局。

<div class="margin-above form-group row">
  <label class="col-form-label col-sm-1">
    Section
  </label>
  <div class="col-sm-6">
    <select class="form-control" v-model="currentView">
      <option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
    </select>
  </div>
</div>

使按钮变大只需添加一个尺寸类。它不会导致居中问题：

      <div class="text-center margin-above2">
        <button type="submit" class="btn btn-success btn-lg">Add Table</button>
      </div>

添加一些额外的空间是一些普通的 CSS。这是一个sn-p。根据您的显示尺寸，您可能需要不同的col-*-# 类。

new Vue({
  el: '#app',
  data: {
    currentView: 'doesNotMatter',
    sections: [{
      label: 'one'
    }, {
      label: 'two'
    }]
  },
  components: {
    someComponent: {}
  }
});

.margin-above2 {
  margin-top: 2rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app" class="container">
  <div class="row">
    <div>
      <h1 class="text-center">Document Creation</h1>
    </div>
    <div class="margin-above form-group row">
      <label class="col-form-label col-sm-1">
        Section
      </label>
      <div class="col-sm-6">
        <select class="form-control" v-model="currentView">
          <option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
        </select>
      </div>
    </div>
  </div>
  <!-- Here we load the diferent sections based on the selection choice -->
  <some-component inline-template>
    <div class="row">
        <form class="form-inline">
          <div class="form-group">
            <label for="rows">rows:</label>
            <input type="number" min="1" value="1" class="form-control" id="rows">
          </div>
          <div class="form-group">
            <label for="columns">columns:</label>
            <input type="number" min="1" value="1" class="form-control" id="cols">
          </div>
          <div class="form-group">
            <label for="cells">cells:</label>
            <input type="number" min="1" value="1" class="form-control" id="cells">
          </div>
          <div class="text-center margin-above2">
            <button type="submit" class="btn btn-success btn-lg">Add Table</button>
          </div>
        </form>
    </div>
  </some-component>
</div>