如何在引导程序中将最后两张卡居中？

问题描述 投票：0回答：3

我使用 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>
html angular bootstrap-4 angular-ui-bootstrap
3个回答
1
投票

将 d-flexalign-items-center justify-content-center 添加到父 => 卡列 div 或者您可以将 mx-auto 添加到最后一个 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>

1
投票

Bootstrap 

card-columns
使用 CSS 多列，并且由于各种原因，实际上不可能将项目居中，或以不同方式对齐行。

不要使用 

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

0
投票

不幸的是，之前的答案对我不起作用。我正在使用 Bootstrap 5.3.2。文档称，.card-columns 已被“转而支持 Masonry”。请参阅：迁移到 v5

如果您仍在寻找另一种对齐卡片的方法，这里是使用 Flex 的布局。只需用实际卡片替换内容即可。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-flex">

    <!-- Example Code -->
  <div class="container d-flex justify-content-center" style="height: calc(100vh - 150px)">
    <div class="d-flex align-items-center">
      <div class="row ">
        <div class="d-flex flex-row mb-3 justify-content-center">
          <div class="p-2 m-2">Flex item 1</div>
          <div class="p-2 m-2">Flex item 2</div>
          <div class="p-2 m-2">Flex item 3</div>
        </div>
        <div class="d-flex flex-row mb-3 justify-content-center">
        <div class="p-2 m-2">Flex item 4</div>
        <div class="p-2 m-2">Flex item 5</div>
      </div>
      </div>
    </div>
  </div>
    
    
    
    <!-- End Example Code -->
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.