Question

我想尝试这样的事情：

card1 card2 card3 card4 card5 card6 card7 card8 card9 card10 card11 card12 card13 card14 card15 等等...（asp.net 转发器控制）

含义：三列的横向卡片....所以不是垂直的....我是三个列的水平卡片（如报纸）。感谢。

任何人都可以帮助我吗？谢谢。

Answer 1

使用单个“row”div并将任意数量的“col-sm-4”div放入其中。它将在3列后自动中断。

<div class="row">
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
</div>

Answer 2

您可以使用.col-sm-4类，它将对齐包含每行卡块的3个div

<div class="row">
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
</div>

Answer 3

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container py-3">
  <div class="card">
    <div class="row ">
      <div class="col-md-4">
        <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" class="w-100" />
      </div>
      <div class="col-md-6 p-3">
        <div class="card-block px-3">
          <h4 class="card-title">Lorem ipsum dolor sit amet</h4>
          <p class="card-text">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
          <p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>
      </div>
      <div class="col-md-2 p-3">
        <div class="card-block px-3">
          <a href="#" class="btn btn-primary">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>

英文版（在线翻译）：

我用BS 4.1这样解决了这个问题，请全屏查看示例（   响应，它变成垂直的，在XS中最好垂直   我认为）

每个div“”在卡中创建一个新的水平列，不使用   额外的CSS。

原始评论：

BS 4.1 ver ejemplo a pantalla的最低要求   完成（负责垂直），主要用于XS   segun mi意见）

cada div   ”               ”   crea una nueva columna Horizontal en el CARD，没有美国css addicional。

<div class="container py-3">
  <div class="card">
    <div class="row ">
      <div class="col-md-4">
        <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" class="w-100" />
      </div>
      <div class="col-md-6 p-3">
        <div class="card-block px-3">
          <h4 class="card-title">Lorem ipsum dolor sit amet</h4>
          <p class="card-text">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
          <p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>
      </div>
      <div class="col-md-2 p-3">
        <div class="card-block px-3">
          <a href="#" class="btn btn-primary">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

您可以通过弹性框属性来执行此操作。可以使用您自己的资源，也可以使用引导程序提供的资源。

<div class="d-flex flex-row flex-wrap">
    <div class="card card-block col-md-4">
        <div class="card-body">
            <h5 class="card-title">{{prod.title}}</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
            <p class="card-text">{{prod.description}}</p>
        </div>
    </div>
    <!-- Do this as many times as you need -->
</div>

Bootstrap 4：卡片：如何在三列中制作水平重复卡片

4 个答案:

英文版（在线翻译）：

原始评论：