html - 对齐模态框中所有卡片的内容

Question

我需要帮助来修复模态框内不同卡片的 CSS。我希望所有卡片对其中的不同内容使用相同的列宽。这样所有的卡片看起来都是对称的。查看下图，它们看起来都是锯齿形的。检查不同卡片中购买按钮的对齐情况。

<!--Card-->
<div class="modal-dialog modal-lg">
   <div class="modal-content">
      <div class="modal-header">
         <input type="text" id="market-search" onkeyup="marketSearch()" placeholder="Search for stock names..">
         <i class="fa fa-times" data-dismiss="modal"></i>
      </div>
      <div class="modal-body">
         <div class="container">
            <div class="card stock-card" data-name="{{ stock.name }}">
               <div class="card-body">
                  <h4 class="card-title">ABB India Ltd.</h4>
                  <div class="market-info">
                     <p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
                     <p class="card-text stock-info up" id="diff"> 9.45
                        <i class="fa fa-arrow-up" aria-hidden="true"></i>
                     </p>
                     <p class="card-text stock-info"><strong>$</strong> <span id="price">1340</span></p>
                     <p class="card-text stock-info">ABB</p>
                     <input id="input_{{stock.code}}"/>
                     <a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
                  </div>
               </div>
            </div>
            <div class="card stock-card" data-name="{{ stock.name }}">
               <div class="card-body">
                  <h4 class="card-title">ACC Ltd.</h4>
                  <div class="market-info">
                     <p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
                     <p class="card-text stock-info up" id="diff"> 19.45
                        <i class="fa fa-arrow-up" aria-hidden="true"></i>
                     </p>
                     <p class="card-text stock-info"><strong>$</strong> <span id="price">134</span></p>
                     <p class="card-text stock-info">ACCBank</p>
                     <input id="input_{{stock.code}}"/>
                     <a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
                  </div>
               </div>
            </div>
            <div class="card stock-card" data-name="{{ stock.name }}">
               <div class="card-body">
                  <h4 class="card-title">INFY </h4>
                  <div class="market-info">
                     <p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
                     <p class="card-text stock-info down" id="diff"> 0.45
                        <i class="fa fa-arrow-down" aria-hidden="true"></i>
                     </p>
                     <p class="card-text stock-info"><strong>$</strong> <span id="price">805</span></p>
                     <p class="card-text stock-info">INFOSYS</p>
                     <input id="input_{{stock.code}}"/>
                     <a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
                  </div>
               </div>
            </div>
            <div class="card stock-card" data-name="{{ stock.name }}">
               <div class="card-body">
                  <h4 class="card-title">ABBACUS India Ltd.</h4>
                  <div class="market-info">
                     <p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
                     <p class="card-text stock-info up" id="diff"> 9.45
                        <i class="fa fa-arrow-up" aria-hidden="true"></i>
                     </p>
                     <p class="card-text stock-info"><strong>$</strong> <span id="price">13</span></p>
                     <p class="card-text stock-info">ABBACUS</p>
                     <input id="input_{{stock.code}}"/>
                     <a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
                  </div>
               </div>
            </div>
            <div class="card stock-card" data-name="{{ stock.name }}">
               <div class="card-body">
                  <h4 class="card-title">Reliance</h4>
                  <div class="market-info">
                     <p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
                     <p class="card-text stock-info up" id="diff"> 9.45
                        <i class="fa fa-arrow-up" aria-hidden="true"></i>
                     </p>
                     <p class="card-text stock-info"><strong>$</strong> <span id="price">1200</span></p>
                     <p class="card-text stock-info">RELIANCE</p>
                     <input id="input_{{stock.code}}"/>
                     <a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

CSS

.card {
    margin-top: 2rem;
}

.card .card-title {
    font-weight: 300;
}

.card .market-info .card-text {
    font-weight: 400;
}

.card .market-info .stock-info
{
    display: block;
    float: left;
    padding: 0 1em;
    text-align: right;
}

.card .market-info .up {
    color: green;
}

.card .market-info .down {
    color: red;
}

.card .market-info input{
  max-width:60px;
  margin-right:5px;
  padding:4px;
}

.card .market-info .stock-info
{
    display: block;
    float: left;
    padding: 0 10px;/*Change HERE*/
    text-align: right;
}

.card .market-info{
  display:flex;
  flex-wrap:wrap; 
  align-items:center;
}

.card .market-info p{
  margin:0;
}

.modal-lg {
    max-width: 40% !important;
}

我无法修复它。非常感谢这里的任何帮助？

Codepen 链接 https://codepen.io/agrawalo/pen/NWKaWMm

Answer 1

添加这个CSS

.card .market-info{
  display:flex;
  flex-wrap:wrap; 
  align-items:center;
  justify-content:space-between; /*Add this property*/
}