引導V4.0.0-alpha.6卡組的內容並不一致，從引導V4.0.0-alpha.6網站頂部

Question

使用的CDN，我解決不了Flexbox，就下車卡內容到頂端：

當我添加align-items-start到card-group，就像這樣：

<div class="card-group align-items-start"> 

的卡調整得到改善，那麼邊界框是脫節和失蹤，他們先前已連接的分段：

有沒有風格她更改爲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 &amp; 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 &amp; 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 &amp; 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> 

Answer 1

將分離.card-block s爲的問題。相反，將所有內容集中到一個.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 &amp; 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 &amp; 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 &amp; 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>

Answer 2

由於card-block爲flex-grow: 1，2 card-block的每張卡都同等地成長，以填補上面和下面的圖像的空間。由於您只想要底部card-block增長，請使用簡單的填充格（<div class="p-3">）來保存card-title和card-subtitle而不是card-block。

<div class="card"> 
     <div class="p-3"> 
      <h4 class="card-title">Strategy &amp; 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> 

http://www.codeply.com/go/PyEJ1a6Rk4