如何在单行中只显示两个按钮答案

【问题标题】：How to show only two button in single row如何在单行中只显示两个按钮
【发布时间】：2021-05-18 06:15:12
【问题描述】：

我使用 *ngFor 来显示多个按钮，它可以有很多按钮。目前，我将所有按钮放在一列中，即一列之下。

但我只想连续显示 2 个按钮，这意味着，在上述情况下，这些绿色按钮应该在一行中，而 2 个红色按钮应该在其下方的下一行。我该怎么做？

这是我试过的：

<div class="row mt-3">
          <div class="col-sm-5"></div>
          <div class="col-sm-7">
            <div *ngFor="let actionButton of actionButtonData">
              <div *ngIf="actionButton.Direction === 1">
                <button type="button" class="btn actionButton btn-success">
                  {{ actionButton.Name }}
                </button>
              </div>
              <div *ngIf="actionButton.Direction === 2">
                <button type="button" class="btn actionButton btn-danger">
                  {{ actionButton.Name }}
                </button>
              </div>
            </div>
          </div>
        </div>

css

.actionButton {
  width: 200px;
  display: inline-block;
  overflow: hidden !important;
  white-space: nowrap;
  text-overflow: ellipsis
}

【问题讨论】：

你也可以添加你的css代码@techguy
@Aahad 添加...请检查
你添加了很多空 div 删除它们并检查！
你检查了吗？
@Aahad 我尝试了不同的方式。及其工作

标签： html css angular typescript twitter-bootstrap

【解决方案1】：

您可以在引导程序中对按钮进行分组。出于您的目的，将 btn-group 类添加到 ngIf div。它是引导功能，您不需要任何自定义 css。

    <div class="row mt-3">
          <div class="col-sm-5"></div>
          <div class="col-sm-7">
            <div *ngFor="let actionButton of actionButtonData">
              <div *ngIf="actionButton.Direction === 1" class="btn-group">
                <button type="button" class="btn actionButton btn-success">
                  {{ actionButton.Name }}
                </button>
              </div>
              <div *ngIf="actionButton.Direction === 2" class="btn-group">
                <button type="button" class="btn actionButton btn-danger">
                  {{ actionButton.Name }}
                </button>
              </div>
            </div>
          </div>
        </div>

【讨论】：

【解决方案2】：

<div class='row'>
  <div class='col'>
    <div class='row'>
        <button >
          button1
        </button>
        <button >
          button2
        </button>
    </div>
        <div class='row'>
        <button >
          button1
        </button>
        <button >
          button2
        </button>
    </div>
  </div>
</div>

试试这个 row col 方法

【讨论】：

【解决方案3】：

您可以使用普通引导程序来实现，将 row 类添加到父 div 并将 col-sm-6 类添加到每个孩子将只在该行中生成 2 个孩子

<div *ngFor="let actionButton of actionButtonData" class="row">             <!--here-->
              <div *ngIf="actionButton.Direction === 1" class="col-sm-6">   <!--here-->
                <button type="button" class="btn actionButton btn-success">
                  {{ actionButton.Name }}
                </button>
              </div>
              <div *ngIf="actionButton.Direction === 2" class="col-sm-6">    <!--here-->
                <button type="button" class="btn actionButton btn-danger">
                  {{ actionButton.Name }}
                </button>
              </div>
</div>

【讨论】：