复选框按钮未与其他按钮共线

Question

我正在使用{'Initial total of Player 1 ': 164, 'Initial total of Player 2 ': 200, 'Number of Ties ': 0, 'Maximum round total won ': 34, 'Final total of Player 1 ': 76, 'Final total of Player 2 ': 288}和{'Initial total of Player 1 ': 179, 'Initial total of Player 2 ': 185, 'Number of Ties ': 1, 'Maximum round total won ': 43, 'Final total of Player 1 ': 155, 'Final total of Player 2 ': 209}。我有以下代码：

Vue

但是它看起来像：

vue-strap按钮不在<div slot="modal-header" class="modal-header"> <button type="button" class="btn btn-default action_btn" v-on:click="closed"> <span class="glyphicon glyphicon-remove"></span> Close </button> <button type="button" class="btn btn-info action_btn" v-on:click="calData"> <span class="glyphicon glyphicon-save"></span> refresh </button> <dropdown type="info"> <button slot="before" type="button" class="btn btn-info" v-on:click="calData"> <span class="glyphicon glyphicon-save"></span> Export </button> <li v-for="current_box in checkboxes"> <checkbox :checked.sync="current_box.value" v-model="current_box.value">{{current_box.name}}</checkbox> </li> </dropdown> </div> 按钮附近。 CSS：

export

我尝试了所有可能的显示，但没有成功。我应该如何调试？

Answer 1

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.btn {
  display: inline-block;
  float: right;
}

<div class="modal-header">
  <button class="btn">close</button>
  <button class="btn">refresh</button>
  <dropdown style="float:left;">
    <button class="btn">export</button>
  </dropdown>
</div>

<div class="modal-header">
  <button class="btn">close</button>
  <button class="btn">refresh</button>
  <dropdown style="float:right;">
    <button class="btn">export</button>
  </dropdown>
</div>

我猜你的情况是这样的。