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>来进行布局。我们可以删除一些不仅简化设计，而且使其更容易阅读。我们还希望利用bootstrap的Horizontal Forms

您的第一个代码段如下所示：

<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来展示这些片段。

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中增加一些空间。这是一个片段。根据您的显示尺寸，您可能需要不同的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>

将内容与bootstrap奇怪的行为对齐

2 个答案: