Как разместить карту Bootstrap под другой картой с прокручиваемым содержимым? - PullRequest
Новая
       2

Как разместить карту Bootstrap под другой картой с прокручиваемым содержимым?

0 голосов
/ 22 января 2020

На моей веб-странице есть две карточки: одна под другой. Верхняя карта имеет прокручиваемый корпус, который содержит большое количество групп ввода. Я хочу, чтобы нижняя карта была вставлена ​​прямо под верхнюю карту.

Проблема, которую я получаю, заключается в том, что нижняя карта расположена далеко внизу страницы, как если бы макет учитывал занимаемое пространство. по группам ввода верхней карты, но они должны быть скрыты внутри прокручиваемого раздела.

Код ниже показывает мои настройки.

Приветствия. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollable Cards</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card text-center col-xl-12 col-lg-12 col-md-12" style="height: 45%;">
        <div class="card-header"> Card 1</div>
        <div class="card-body">
            <div class="scrollable" style="max-height: 35%; overflow-y: auto;">
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card text-center col-xl-12 col-lg-12 col-md-12" style="height: 45%;">
        <div class="card-header"> Card 2 </div>
        <div class="card-body">
            <div class="scrollable" style="max-height: 35%; overflow-y: auto;">
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

1 Ответ

0 голосов
/ 23 января 2020

Вы должны сделать несколько height с фиксированным размером в пикселях.

Например, удалить style="height: 45%;", заменить style="max-height: 35%; overflow-y: auto;" на style="max-height: 150px; overflow-y: auto;"

И вообще ваш код довольно грязный. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollable Cards</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card text-center col-xl-12 col-lg-12 col-md-12">
        <div class="card-header"> Card 1</div>
        <div class="card-body">
            <div class="scrollable" style="max-height: 150px; overflow-y: auto;">
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card text-center col-xl-12 col-lg-12 col-md-12" style="height: 45%;">
        <div class="card-header"> Card 2 </div>
        <div class="card-body">
            <div class="scrollable" style="max-height: 35%; overflow-y: auto;">
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend"> <span class="input-group-text" id="basicaddon1">@</span> </div>
                    <input type="text" class="form-control" placeholder="normal sized input group" aria-describedby="basicaddon1">
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...