Bootstrap v4.0.0-alpha.6 卡片组内容未对齐顶部
Bootstrap v4.0.0-alpha.6 card-group content not align to top
使用来自Bootstrap v4.0.0-alpha.6 网站的CDN，我无法解决flexbox 将卡片内容放到顶部的问题：
当我将 align-items-start 添加到 card-group 时，像这样：
<div class="card-group align-items-start">
改进了卡片对齐方式，然后边界框脱线并且缺少之前连接的部分：
sheet bootstrap-4a6 发布版本没有样式更改。这是我的 html:
<section id="what-we-do" style="padding: 20px 0px;">
<div class="section-content">
<div class="container">
<h2>What we do</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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 class="row">
<div class="col-sm-12">
<div class="card-group align-items-start">
<div class="card">
<div class="card-block">
<h4 class="card-title">Strategy & Planning</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-top img-fluid" src="img/chalkboard.jpg" alt="a chalkboard">
<div class="card-block">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repellendus est rerum sed, aliquid inventore, voluptate, eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus consequuntur non distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Creative & Design</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-bottom img-fluid" src="img/working.jpg" alt="working on a laptop">
<div class="card-block">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed alias maxime fugiat error doloribus eum, aliquam deserunt ut sequi asperiores iure natus blanditiis commodi eveniet ipsam veniam eius eos. Sit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repellendus est rerum sed, aliquid inventore, voluptate, eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus consequuntur non distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Programming & Technical</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-bottom img-fluid" src="img/programming.jpg" alt="fingers typing on a keyboard">
<div class="card-block">
<p class="card-text">Numquam repellendus est rerum sed, aliquid inventore, voluptate, eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus consequuntur non distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
由于 card-block 是 flex-grow: 1，因此每张卡片中的 2 个 card-block 均等增长以填充图像上方和下方的 space。由于您只希望底部 card-block 增长，因此使用简单的填充 div (<div class="p-3">) 来容纳 card-title 和 card-subtitle 而不是 card-block.
<div class="card">
<div class="p-3">
<h4 class="card-title">Strategy & Planning</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="img-fluid" src="//placehold.it/600" alt="a chalkboard">
<div class="card-block">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipsicing elit. Numquam repellendus est rerum sed, aliquid inventore, voluptate, eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus consequuntur non distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
分开的 .card-block 是问题所在。相反，将所有内容集中到一个 .card-block 中将解决您的问题。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="what-we-do" style="padding: 20px 0px;">
<div class="section-content">
<div class="container">
<h2>What we do</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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 class="row">
<div class="col-sm-12">
<div class="card-group">
<div class="card">
<div class="card-block">
<h4 class="card-title">Strategy & Planning</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
<img class="card-img-top img-fluid" src="img/chalkboard.jpg" alt="a chalkboard">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam
repellendus est rerum sed, aliquid inventore, voluptate, eveniet, soluta nostrum
distinctio cupiditate adipisci sint! Natus consequuntur non distinctio perferendis,
quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal"
data-target="#myModal">learn more
</button>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Creative & Design</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
<img class="card-img-bottom img-fluid" src="img/working.jpg" alt="working on a laptop">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed alias
maxime fugiat error doloribus eum, aliquam deserunt ut sequi asperiores iure natus
blanditiis commodi eveniet ipsam veniam eius eos. Sit! Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Numquam repellendus est rerum sed, aliquid inventore,
voluptate, eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus
consequuntur non distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal"
data-target="#myModal">learn more
</button>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Programming & Technical</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
<img class="card-img-bottom img-fluid" src="img/programming.jpg"
alt="fingers typing on a keyboard">
<p class="card-text">Numquam repellendus est rerum sed, aliquid inventore, voluptate,
eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus consequuntur non
distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal"
data-target="#myModal">learn more
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
使用来自Bootstrap v4.0.0-alpha.6 网站的CDN，我无法解决flexbox 将卡片内容放到顶部的问题：
当我将 align-items-start 添加到 card-group 时，像这样：
<div class="card-group align-items-start">
改进了卡片对齐方式，然后边界框脱线并且缺少之前连接的部分：
sheet bootstrap-4a6 发布版本没有样式更改。这是我的 html:
<section id="what-we-do" style="padding: 20px 0px;">
<div class="section-content">
<div class="container">
<h2>What we do</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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 class="row">
<div class="col-sm-12">
<div class="card-group align-items-start">
<div class="card">
<div class="card-block">
<h4 class="card-title">Strategy & Planning</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-top img-fluid" src="img/chalkboard.jpg" alt="a chalkboard">
<div class="card-block">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repellendus est rerum sed, aliquid inventore, voluptate, eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus consequuntur non distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Creative & Design</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-bottom img-fluid" src="img/working.jpg" alt="working on a laptop">
<div class="card-block">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed alias maxime fugiat error doloribus eum, aliquam deserunt ut sequi asperiores iure natus blanditiis commodi eveniet ipsam veniam eius eos. Sit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repellendus est rerum sed, aliquid inventore, voluptate, eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus consequuntur non distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Programming & Technical</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-bottom img-fluid" src="img/programming.jpg" alt="fingers typing on a keyboard">
<div class="card-block">
<p class="card-text">Numquam repellendus est rerum sed, aliquid inventore, voluptate, eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus consequuntur non distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
由于 card-block 是 flex-grow: 1，因此每张卡片中的 2 个 card-block 均等增长以填充图像上方和下方的 space。由于您只希望底部 card-block 增长，因此使用简单的填充 div (<div class="p-3">) 来容纳 card-title 和 card-subtitle 而不是 card-block.
<div class="card">
<div class="p-3">
<h4 class="card-title">Strategy & Planning</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="img-fluid" src="//placehold.it/600" alt="a chalkboard">
<div class="card-block">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipsicing elit. Numquam repellendus est rerum sed, aliquid inventore, voluptate, eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus consequuntur non distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
分开的 .card-block 是问题所在。相反，将所有内容集中到一个 .card-block 中将解决您的问题。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="what-we-do" style="padding: 20px 0px;">
<div class="section-content">
<div class="container">
<h2>What we do</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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 class="row">
<div class="col-sm-12">
<div class="card-group">
<div class="card">
<div class="card-block">
<h4 class="card-title">Strategy & Planning</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
<img class="card-img-top img-fluid" src="img/chalkboard.jpg" alt="a chalkboard">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam
repellendus est rerum sed, aliquid inventore, voluptate, eveniet, soluta nostrum
distinctio cupiditate adipisci sint! Natus consequuntur non distinctio perferendis,
quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal"
data-target="#myModal">learn more
</button>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Creative & Design</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
<img class="card-img-bottom img-fluid" src="img/working.jpg" alt="working on a laptop">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed alias
maxime fugiat error doloribus eum, aliquam deserunt ut sequi asperiores iure natus
blanditiis commodi eveniet ipsam veniam eius eos. Sit! Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Numquam repellendus est rerum sed, aliquid inventore,
voluptate, eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus
consequuntur non distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal"
data-target="#myModal">learn more
</button>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Programming & Technical</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
<img class="card-img-bottom img-fluid" src="img/programming.jpg"
alt="fingers typing on a keyboard">
<p class="card-text">Numquam repellendus est rerum sed, aliquid inventore, voluptate,
eveniet, soluta nostrum distinctio cupiditate adipisci sint! Natus consequuntur non
distinctio perferendis, quibusdam, quasi!</p>
<button type="button" class="btn btn-success-outline" data-toggle="modal"
data-target="#myModal">learn more
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>