一行中有多张卡片，间距不符合预期
一行中有多张卡片，间距不符合预期
提问于 2020-04-03 18:38:59
我一直在尝试文档中的一些示例代码，特别是连续布局三张卡片。
当我剪切并粘贴代码到我的组件页面时，我没有得到预期的结果。
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
<div class="branding">
<a href="" class="nav-link">
<img alt="" src="assets/logo2.png" height="60">
<span class="title">Good day</span>
</a>
</div>
<div class="header-actions"></div>
<form class="search">
<label for="search_input">
<input id="search_input" type="text" placeholder="Search for keywords...">
</label>
</form>
<div class="header-actions">
<clr-dropdown>
<button class="nav-text" clrDropdownTrigger aria-label="open user profile">
john.doe@vmware.com
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a href="..." clrDropdownItem>Preferences</a>
<a href="..." clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</header>
<div class="content-container">
<div class="clr-row">
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 1</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
<a href="..." class="btn btn-sm btn-link">Action 1</a>
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 2</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
<a href="..." class="btn btn-sm btn-link">Action 2</a>
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 3</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
<a href="..." class="btn btn-sm btn-link">Action 3</a>
</div>
</div>
</div>
</div>
</div>
</div>我期待着网页上有三张大小相等的卡片。结果我得到了..。
我需要安装Bootstrap才能工作吗？
提亚
回答 1
Stack Overflow用户
发布于 2020-04-03 21:53:55
你就快做到了，你的页面结构中缺少了一个重要的元素。卡片很好，但是您只需要在<div class="content-container">元素中添加<div class="content-area">。
<div class="content-container">
<div class="content-area"> <!-- THIS IS MISSING -->
<div class="clr-row">
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 1</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
<a href="..." class="btn btn-sm btn-link">Action 1</a>
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 2</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
<a href="..." class="btn btn-sm btn-link">Action 2</a>
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 3</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
<a href="..." class="btn btn-sm btn-link">Action 3</a>
</div>
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61010023
复制相关文章
相似问题
腾讯云开发者
