Блог

Главная - Вопросы по программированию - Bootstrap, делающий 2 div одинаковой высоты

Bootstrap, делающий 2 div одинаковой высоты

#css #bootstrap-4

#css #bootstrap-4

Вопрос:

Я разрабатываю панель мониторинга и пытаюсь, чтобы 2 divs (Bootstrap Card) имели одинаковую высоту в одном и том же контейнере строк div. Погуглил несколько решений на SO, скопируйте и вставьте эти решения, но, похоже, не могу сделать это правильно. Я пытаюсь, чтобы div «Разбивка по отставке» имел ту же высоту, что и div «Отставка в {месяц}», когда экран lg (большой) или больше в bootstrap 4.

 #resign-widget.row.col-lg-4.card {
    height = 100%;
}  
 <!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous">
      </script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
      <link rel="stylesheet" type="text/css" href="dashboard.css">
      <title>Dashboard</title>
  </head>

  <body>
    <!-- Setting up the Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand mb-0 h1" href="#">BI Dashboard</a>
      <!-- Button for expanding and collapsing the Navbar Menu -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Navbar elements -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Quick Action
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <!-- Dashboard Top Software Menu -->
    <div id="software" class="container-fluid">
      <div class="card-deck">
        <div class="card" style>
          <img src="https://3bohsk43ipkewyk0v1ajbz21-wpengine.netdna-ssl.com/nz/wp-content/uploads/sites/3/2018/08/prosoft-u4-hrms.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="h5 card-title"><span><a href="#"></a>Unit4 Prosoft</a></span></h5>
            <h6 class="card-subtitle mb-2 text-muted">Human Resource Management System</h6>
            <p class="card-text">All HR-related data are collected from here</p>
            <a href="#" class="btn btn-primary">Login to Prosoft</a>
          </div>
          <div class="card-footer">
            <small class="text-muted">Database last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <img src="https://www.onlinemarketplaces.com/ext/resources/-1GOMS/Jobs/Misc/salesforce.png?1576025262" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="h5 card-title"><span><a href="#"></a>Salesforce</a></span></h5>
            <h6 class="card-subtitle mb-2 text-muted">Customer Relations Management Software</h6>
            <p class="card-text">All sales and customer related data collected here</p>
            <a href="#" class="btn btn-primary">Login to Salesforce</a>
          </div>
          <div class="card-footer">
            <small class="text-muted">Database last updated 1 min ago</small>
          </div>
        </div>
        <div class="card">
          <img src="https://cloudease.com.au/wp-content/uploads/2015/10/opengraph.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="h5 card-title"><span><a href="#"></a>Xero</a></span></h5>
            <h6 class="card-subtitle mb-2 text-muted">Accounting Management Software</h6>
            <p class="card-text">All AP/AR related data are collected from here</p>
            <a href="#" class="btn btn-primary">Login to Xero</a>
          </div>
          <div class="card-footer">
            <small class="text-muted">Database last updated 15 mins ago</small>
          </div>
        </div>
      </div>
    </div>

    <!-- Site seperator for clearer look -->
    <div id="site-seperator"></div>

    <!-- Dashboard body widgets of data -->
    <div id="resign-widget" class="container-fluid">
      <div class="row">
        <div class="col-lg-8">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Resignation in {month}</h5>
              <p class="card-text">{number} employee(s) resigned in {month}.</p>
            </div>
            <canvas id="myChart"></canvas>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Resignation Breakdown</h5>
              <p class="card-text">Resignation numbers by department</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  
  </body>
  
  <!-- All javascript for HTML outside of body -->
  <script src="mdb.js"></script><script src="resignation.js"></script>

</html>

Ответ №1:

Вы можете просто установить высоту карточек, равную 100% их родительским элементам, col s в данном случае. Поскольку оба col элемента имеют одинаковую высоту, этот метод будет работать.

 #resign-widget.row.col-lg-4.card {
    height = 100%;
}  
 <!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous">
      </script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
      <link rel="stylesheet" type="text/css" href="dashboard.css">
      <title>Dashboard</title>
  </head>

  <body>
    <!-- Setting up the Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand mb-0 h1" href="#">BI Dashboard</a>
      <!-- Button for expanding and collapsing the Navbar Menu -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Navbar elements -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Quick Action
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <!-- Dashboard Top Software Menu -->
    <div id="software" class="container-fluid">
      <div class="card-deck">
        <div class="card" style>
          <img src="https://3bohsk43ipkewyk0v1ajbz21-wpengine.netdna-ssl.com/nz/wp-content/uploads/sites/3/2018/08/prosoft-u4-hrms.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="h5 card-title"><span><a href="#"></a>Unit4 Prosoft</a></span></h5>
            <h6 class="card-subtitle mb-2 text-muted">Human Resource Management System</h6>
            <p class="card-text">All HR-related data are collected from here</p>
            <a href="#" class="btn btn-primary">Login to Prosoft</a>
          </div>
          <div class="card-footer">
            <small class="text-muted">Database last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <img src="https://www.onlinemarketplaces.com/ext/resources/-1GOMS/Jobs/Misc/salesforce.png?1576025262" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="h5 card-title"><span><a href="#"></a>Salesforce</a></span></h5>
            <h6 class="card-subtitle mb-2 text-muted">Customer Relations Management Software</h6>
            <p class="card-text">All sales and customer related data collected here</p>
            <a href="#" class="btn btn-primary">Login to Salesforce</a>
          </div>
          <div class="card-footer">
            <small class="text-muted">Database last updated 1 min ago</small>
          </div>
        </div>
        <div class="card">
          <img src="https://cloudease.com.au/wp-content/uploads/2015/10/opengraph.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="h5 card-title"><span><a href="#"></a>Xero</a></span></h5>
            <h6 class="card-subtitle mb-2 text-muted">Accounting Management Software</h6>
            <p class="card-text">All AP/AR related data are collected from here</p>
            <a href="#" class="btn btn-primary">Login to Xero</a>
          </div>
          <div class="card-footer">
            <small class="text-muted">Database last updated 15 mins ago</small>
          </div>
        </div>
      </div>
    </div>

    <!-- Site seperator for clearer look -->
    <div id="site-seperator"></div>

    <!-- Dashboard body widgets of data -->
    <div id="resign-widget" class="container-fluid">
      <div class="row">
        <div class="col-lg-8">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Resignation in {month}</h5>
              <p class="card-text">{number} employee(s) resigned in {month}.</p>
            </div>
            <canvas id="myChart"></canvas>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Resignation Breakdown</h5>
              <p class="card-text">Resignation numbers by department</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  
  </body>
  
  <!-- All javascript for HTML outside of body -->
  <script src="mdb.js"></script><script src="resignation.js"></script>

</html>