如何将 bootstrap 中的最后两张牌居中？

Question

我在 angular 中使用 bootstrap 编写应用程序。我希望最后两张牌在中间，而不是在左边。现在看起来最后一张牌不见了。我想更正它。怎么做？

html代码：

<div class="container" style="padding-top:1.1cm">
    <div class="card-columns">
  
      <div class="card text-center" [routerLink]="['/special/arrangements-salon']">
        <div class="card-body">
          <img [src]="salon" height="100" width="100"><br><label>
            <h5 style="padding-top:6mm">salon</h5>
          </label>
        </div>
      </div>
  
      <div class="card text-center" [routerLink]="['/special/arrangements-study']">
        <div class="card-body">
          <img [src]="study" height="100" width="100"><br><label>
            <h5 style="padding-top:6mm">gabinet</h5>
          </label>
        </div>
      </div>
        
      <div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
        <div class="card-body">
          <img [src]="bedroom" height="100" width="100"> <br><label>
            <h5 style="padding-top:6mm">sypialnia
            </h5>
          </label>
        </div>
      </div>
  
      <div class="card text-center"  [routerLink]="['/special/arrangements-kitchen']">
        <div class="card-body">
          <img [src]="kitchen" height="100" width="100"> <br><label>
            <h5 style="padding-top:6mm">kuchnia
            </h5>
          </label>
        </div>
      </div>
  
      <div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
        <div class="card-body">
          <img [src]="bathroom" height="100" width="100"><br><label>
            <h5 style="padding-top:6mm">łazienka</h5>
          </label>
        </div>
      </div>
  
    </div>
  </div>

Answer 1

add d-flex align-items-center justify-content-center to parent => card-columns div or you can add mx-auto to last div

  
        
<div class="container" style="padding-top:1.1cm">
        <div class="card-columns d-flex align-items-center justify-content-center">
      
          <div class="card text-center" [routerLink]="['/special/arrangements-salon']">
            <div class="card-body">
              <img [src]="salon" height="100" width="100"><br><label>
                <h5 style="padding-top:6mm">salon</h5>
              </label>
            </div>
          </div>
      
          <div class="card text-center" [routerLink]="['/special/arrangements-study']">
            <div class="card-body">
              <img [src]="study" height="100" width="100"><br><label>
                <h5 style="padding-top:6mm">gabinet</h5>
              </label>
            </div>
          </div>
            
          <div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
            <div class="card-body">
              <img [src]="bedroom" height="100" width="100"> <br><label>
                <h5 style="padding-top:6mm">sypialnia
                </h5>
              </label>
            </div>
          </div>
      
          <div class="card text-center"  [routerLink]="['/special/arrangements-kitchen']">
            <div class="card-body">
              <img [src]="kitchen" height="100" width="100"> <br><label>
                <h5 style="padding-top:6mm">kuchnia
                </h5>
              </label>
            </div>
          </div>
      
          <div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
            <div class="card-body">
              <img [src]="bathroom" height="100" width="100"><br><label>
                <h5 style="padding-top:6mm">łazienka</h5>
              </label>
            </div>
          </div>
      
        </div>
      </div>

Answer 2

Bootstrap card-columns 使用 CSS 多列，出于各种原因，它 not really possible 使项目居中，或以不同方式对齐行。

不使用 card-columns，而是使用网格 (row > col-*)，但您应该注意，这不会为您提供砖石布局或从上到下的布局订购。

如何将 bootstrap 中的最后两张牌居中？

How to center last two cards in bootstrap?

html

angular-ui-bootstrap

bootstrap-4

angular