Question

任何人都可以建议/纠正我如何并排排列或排列按钮和输入框，而无需在bootstrap中进行分组。

我在互联网上搜索了几个仅仅是元素分组的例子。

jsfiddle：https://jsfiddle.net/erama035/p9dagmL3/3/

<div class="container">
    <div class="row">

       <div class="col-xs-5 col-sm-5 col-md-5">
            <button class="btn btn-default col-sm-2 col-md-2">add</button>
            <input  class="form-control col-md-3 col-sm-2"/>
       </div>

       <div class="col-xs-7 col-sm-7 col-md-7">
            <button class="btn btn-default col-md-2">remove</button>
            <input  class="form-control col-md-5"/>
       </div>

   </div>  
 </div>

Answer 1

快速方法是，只需将Flexbox用于父<div>即可。这会将子元素转换为弹性项目，默认情况下并排排列。

.container > .row > div {
  display: flex;
}

正确的方法是使用Bootstraps预定义类进行分组。

＆＃13;

.container>.row>div {
  display: flex;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-5 col-sm-5 col-md-5">
      <button class="btn btn-default">add</button>
      <input class="form-control" />
    </div>
    <div class="col-xs-7 col-sm-7 col-md-7">
      <button class="btn btn-default">remove</button>
      <input class="form-control" />
    </div>
  </div>
</div>

＆＃13;

Answer 2

对于跨浏览器，您可以简单地使用内联块

<template>
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" :checked="todo.done" v-on:change="toggle(todo)">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button class="destroy" v-on:click="remove(todo)">delete</button>

      <input class="edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">

    </li>
    <li><input placeholder="What needs to be done?" autofocus v-model="todo" v-on:keyup.enter="add"></li>
  </ul>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data () {
    return {
      todo: '',
      editedTodo: null
    }
  },
  head () {
    return {
      title: this.$route.params.slug || 'all',
      titleTemplate: 'Nuxt TodoMVC : %s todos'
    }
  },
  fetch ({ store }) {
    store.commit('todos/add', 'Hello World')
  },
  computed: {
    todos () {
      // console.log(this)
      return this.$store.state.todos.list
    }
  },
  methods: {
    add (e) {

      var value = this.todo && this.todo.trim()
      if (value) {
        this.$store.commit('todos/add', value)
        this.todo = ''
      }

    },
    toggle (todo) {
      this.$store.commit('todos/toggle', todo)
    },
    remove (todo) {
      this.$store.commit('todos/remove', todo)
    },

    doneEdit (todo) {
      this.editedTodo = null
      todo.text = todo.text.trim()
      if (!todo.text) {
        this.$store.commit('todos/remove', todo)
      }
    },
    cancelEdit (todo) {
      this.editedTodo = null
      todo.text = this.beforeEditCache
    },
  },
  directives: {
    'todo-focus' (el, binding) {
      if (binding.value) {
        el.focus()
      }
    }
  },
}
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

引导按钮和输入框并排

2 个答案: