Question

这是Vue.js模板中代码的样子：

<modal v-model="isThematicSearchCardOpen" title="Card">
  <div>
    <form-row>
      <form-group :columns="12" title="Name">
        <text-input/>
      </form-group>
    </form-row>
    <form-row>
      <form-group :columns="12" title="Icon">
        <span style="margin-left: 20px;">None</span>
        <span>
          <icon-button default @click="upload" title="Save" icon="icon-folder-plus"/>
          <file-selector ref="fileSelector" @changed="selectFile" :filter="'.png, .jpeg, .jpg, .bpm'"/>
        </span>
      </form-group>
    </form-row>
  </div>
  <div slot="footer">
    <button class="btn btn-primary" @click="create">Create</button>
    <button class="btn btn-default" @click="cancelThematicSearchCard">Cancel</button>
  </div>
</modal>

我想将以下部分移到最右端：

<span>
    <icon-button default @click="upload" title="Save" icon="icon-folder-plus"/>
    <file-selector ref="fileSelector" @changed="selectFile" :filter="'.png, .jpeg, .jpg, .bpm'"/>
</span>

我们使用Bootstrap 3作为基本CSS。

该行如下所示：

Answer 1

使用class="pull-right"或

<div class="float-left">Float left on all viewport sizes</div><br>

<div class="float-right">Float right on all viewport sizes</div><br>

或

padding-left:500px;
padding-right:500px;

Answer 2

使用flex box实现它。谢谢

.icon {
  display: flex;
  justify-content: space-between;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<modal v-model="isThematicSearchCardOpen" title="Card">
  <div>
    <form-row>
      <form-group :columns="12" title="Name">
        <text-input/>
      </form-group>
    </form-row>
    <form-row>
      <form-group :columns="12" title="Icon" class="icon">
        <span style="margin-left: 20px;">None</span>
        <span>
          <icon-button default @click="upload" title="Save" class="fas fa-folder-plus" icon="icon-folder-plus"/>
          <file-selector ref="fileSelector" @changed="selectFile" :filter="'.png, .jpeg, .jpg, .bpm'"/>
        </span>
      </form-group>
    </form-row>
  </div>
  <div slot="footer">
    <button class="btn btn-primary" @click="create">Create</button>
    <button class="btn btn-default" @click="cancelThematicSearchCard">Cancel</button>
  </div>
</modal>

Answer 3

您可以使用flexbox。这里的一个窍门是我们使用margin-left: auto作为图标

.icon-block {
  display: flex;
}
.icon {
  margin-left: auto;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<modal v-model="isThematicSearchCardOpen" title="Card">
  <div>
    <form-row>
      <form-group :columns="12" title="Name">
        <text-input/>
      </form-group>
    </form-row>
    <form-row>
      <form-group :columns="12" title="Icon" class="icon-block">
        <span style="margin-left: 20px;">None</span>
        <span class="icon">
          <icon-button default @click="upload" title="Save" class="fas fa-folder-plus" icon="icon-folder-plus"/>
          <file-selector ref="fileSelector" @changed="selectFile" :filter="'.png, .jpeg, .jpg, .bpm'"/>
        </span>
      </form-group>
    </form-row>
  </div>
  <div slot="footer">
    <button class="btn btn-primary" @click="create">Create</button>
    <button class="btn btn-default" @click="cancelThematicSearchCard">Cancel</button>
  </div>
</modal>

如何将图标移到最右端？

3 个答案: