Question

这是我的代码，我不知道如何将按钮放在一边。（顺便说一句，我是编码新手）

<form>
     <div class="search-row-location search-row-checkbox-multiple">
        <label for="location" class="search-label">Location</label>
        <div class="field">
           <input checked="" name="location[]" id="location_0" value="0" class="input-field=" type="checkbox">
           <label class="search-checkbox-label">All Locations</label>                           
           <input name="location[]" id="location_1" value="1" class="input-field" type="checkbox">
           <label class="search-checkbox-label">Sydney</label> 
           <input name="location[]" id="location_2" value="1" class="input-field" type="checkbox">
           <label class="search-checkbox-label">Paris</label> 
        </div>
    </div>
    <div class="search-row-price search-row-checkbox-multiple">
        <label for="price" class="search-label">Price</label>
        <div class="field">
           <input checked="" name="price[]" id="price_0" value="0" class="input-field=" type="checkbox">
           <label class="search-checkbox-label">All Prices</label>                          
           <input name="price[]" id="price_1" value="1" class="input-field" type="checkbox">
           <label class="search-checkbox-label">100$</label> 
           <input name="price[]" id="price_2" value="1" class="input-field" type="checkbox">
           <label class="search-checkbox-label">200$</label> 
        </div>
    </div>
</form>

Answer 1

由于您使用的是bootstrap，因此您需要了解一些事项：

如果不将类放在.container和.row类中，

.col类将无法工作。另一个重要的是列数字大小加起来为12;现在你的添加到20.所以你的代码看起来应该更像这样：

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
       <form>
        <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
       </form>
    </div>
    <div class="col-12 col-md-6">
      <form>
        <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
       </form>
    </div>
  </div>
</div>

Here is a codepen to show it working

Refer to Bootstrap documentation on grids as well

Answer 2

只需将按钮放在同一个表格和div

中

Vue.component('datetimepicker', {
    template: `
            <div class='input-group date' ref="datetimepicker">
                <input type='text' class="form-control" :value="value" @change="update($event)" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
    `,
    props: ['value'],
    methods: {
        update(event){

            this.$emit('input', event.target.value);
        }
    },
    mounted(){
        $(this.$refs.datetimepicker).datetimepicker()
    }
});

Answer 3

<div class="row second">
    <div class="col-md-4 text-center">
            <form>
                 <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
            </form>
    </div>

    <div class="col-md-8 text-center">
            <form>
                <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
            </form>
    </div>
</div>

Answer 4

<div class="second">
       <div class="col-md-12 text-center">
           <form>
        <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
                <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
            </form>
        </div>
    </div>

按钮位于不同的列中，因此它排成一行。

详细了解Bootstrap grid system

Answer 5

在查看下面的答案之前，我建议您阅读有关boostrap网格系统的内容。每行有12列。

您的第一个<div>用完了12列，这就是为什么第二个<div>的第二个按钮位于新行/行的原因。

更多细节可以在这里找到： Bootstrap: Aligning two buttons on the same row

Bootstrap按钮在一行中

5 个答案: