Question

目前，我正在与Bootstrap合作。我循环并创建很多这样的卡片（项目中的每个任务一个）。问题是，如果卡片的标题更大，则每个卡片的高度都不相同。我希望能够标准化高度，< / p>

我最初使用过：

<div class="card">

然后我在下面尝试了一下，的确使所有卡都成为标准高度。

<div class="card h-100">

如您在第二张图上看到的那样，它消除了卡的每一行之间的空间，所以我不确定如何在保持间距的同时标准化大小？

任何想法将不胜感激：

<div class="row">    
  <div class="col-sm-3">
    <div class="card">

        <h5 class="card-header">65 :new task from closed screen</h5>
          <div class="card-body">
        <p class="card-text">
<table class="table table-hover">       
        <tr>
        <td>Created By</td>
        <td>kikee</td>
        </tr>       
        <tr>
        <td>Project</td>
        <td>netshock</td>
        </tr>       
        <tr>

                <td>Priority</td>
            <td class="table-danger">High</td>

            </tr>       
        </table>
     <table class="table table-hover">
      <tbody>
         <tr class="table">
             <th scope="col"><form action="/complete/" name="form2", id="form2" method="post">
            <input type='hidden' name='csrfmiddlewaretoken' value='8ALiONJGxPQaAnTYwsBUUnpny1YnyntTOccxk7VG7rTsltn2hT63KTTlv7rS09m3' />
            <button name="donebutton" type="submit"  value=65 data-toggle="tooltip" data-placement="top" title="Complete Task" class="btn btn-success"><i class="fas fa-check"></i></button></th>
            </form>
            <td>      
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#EditModal65">
            <i class="far fa-edit"></i> </button>
            <!-- Modal -->
            <div class="modal fade" id="EditModal65" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Edit Task 65 : new task from closed screen</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
            <form action="/update/" name="form1", id="form1" method="post">
            <input type='hidden' name='csrfmiddlewaretoken' value='8ALiONJGxPQaAnTYwsBUUnpny1YnyntTOccxk7VG7rTsltn2hT63KTTlv7rS09m3' />
        <div class="form-group">
      <input type="text" name="project"  class="form-control" id="task" aria-describedby="emailHelp" placeholder="Project">
      </div>
            <div class="form-group">
            <select name="priority" class="form-control" id="exampleFormControlSelect1">
            <option>Select Priority</option>
            <option>High</option>
            <option>Medium</option>
            <option>Minimum</option>
            </select>
            </div>
            <div class="form-group">
            <input type="text" name="due"  class="form-control" id="task" aria-describedby="emailHelp" placeholder="Due Date YYYYMMDD">
            </div>
            <button type="submit"  name="editbutton" value=65 class="btn btn-warning">Edit Task</button>
            </form>
         </td>
         <td scope="col"><form action="/delete/" name="form1", id="form1" method="post">
            <input type='hidden' name='csrfmiddlewaretoken' value='8ALiONJGxPQaAnTYwsBUUnpny1YnyntTOccxk7VG7rTsltn2hT63KTTlv7rS09m3' />   

            <button name="deletebutton" data-toggle="tooltip" data-placement="top" title="Delete Task" type="submit"  value=65  class="btn btn-danger"><i class="fas fa-times"></i></button></td></form>
         </tr>
               </tbody>

         </table>

          <table class="table table-hover">
      <tbody>
         <tr class="table">


            <th scope="col">
               <!-- Button trigger modal -->
               <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#Modal65">
              <i class="fas fa-comment-dots"></i>
               </button>
               <!-- Modal -->
               <div class="modal fade" id="Modal65" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                     <div class="modal-content">
                        <div class="modal-header">
                           <h5 class="modal-title" id="exampleModalLabel">Add Note 65 : new task from closed screen</h5>
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                           <span aria-hidden="true">&times;</span>
                           </button>
                        </div>
                        <div class="modal-body">
                           <form action="/addnote/" name="form1", id="form1" method="post">
                              <input type='hidden' name='csrfmiddlewaretoken' value='8ALiONJGxPQaAnTYwsBUUnpny1YnyntTOccxk7VG7rTsltn2hT63KTTlv7rS09m3' />
                              <div class="form-group">
                                 <textarea name="note" class="form-control" id="exampleFormControlTextarea1" rows="2"></textarea>
                              </div>
                             <!-- <div class="form-group">
                                 <input type="text" name="noteid"  class="form-control" id="noteid" aria-describedby="emailHelp" placeholder="Enter Note ID">
                 </div>-->
                              <div align="right">
                                 <button name="addnote" type="submit"  value=65  class="btn btn-secondary">add note</button>
                           </form>
                           </div>
                        </div>
                     </div>
                  </div>
            </th>

            <td>
            <form action="/viewnote/" name="form1", id="form1" method="post">
            <input type='hidden' name='csrfmiddlewaretoken' value='8ALiONJGxPQaAnTYwsBUUnpny1YnyntTOccxk7VG7rTsltn2hT63KTTlv7rS09m3' />
            <button name="viewnote" type="submit"  value=65 data-toggle="tooltip" data-placement="top" title="View Task Notes"  class="btn btn-info"><i class="fas fa-comments"></i></button></form></td>

            <td scope="col">

            <button name="nothing" data-toggle="tooltip" data-placement="top" type="submit" class="btn btn-secondary"><i class="fal fa-circle"></i></button></td>

         <tr>
         </div></div></div>
         </div>           

         </td>
         </tr>

      </tbody>
   </table>
      </div>
    </div>
    <br>

  </div>

带卡h-100的引导程序布局

0 个答案: