css - 如何将图标移动到右端？

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

使用 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>