부트 스트랩 4 카드를 배열하는 방법

debugcn 에 게시 Dev

Kogelet

다음 순서로 3 개의 부트 스트랩 카드를 배열하는 가장 좋은 방법은 무엇입니까?

왼쪽의 Card1
Card2 및 Card3은 오른쪽에 있습니다.
Card2의 높이가 고정되어 있습니다.
Card3은 Card2의 크기에 따라 유연합니다.
Card3에는 사용자 정의 스크롤 막대가 있습니다.
카드는 반응 형이며 모바일 화면에 차례로 배치됩니다.

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <div class="container">
  <div class="row">
    <div class="col-md-6 border">
      <div class="card shadow m-5">
        <div class="card-body" style="height:300px;">
          <h3>Card 1</h3>
        </div>
      </div>
    </div>
    <div class="col-md-6 border">
      <div class="d-flex flex-column">
        <div class="d-flex align-items-start">
          <div class="card shadow m-5">
            <div class="card-body">
              <h3>Card 2</h3>
            </div>
          </div>
        </div>
        <div class="d-flex align-items-stretch">
          <div class="card shadow m-5">
            <div class="card-body">
            <h3>Card 3</h3>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus massa nec nisl placerat sollicitudin. Phasellus mi massa, sollicitudin eu facilisis sit amet, consequat sit amet urna. Suspendisse laoreet ipsum et varius lobortis. Duis facilisis dui vel finibus dignissim. Nulla facilisi. Donec porttitor nec justo sit amet dapibus. Nam in iaculis purus.

Aliquam at blandit sem. Aenean auctor varius iaculis. In pellentesque orci quis ipsum dapibus, eu mattis nisi feugiat. Cras sollicitudin, magna eget semper placerat, leo dui convallis leo, eget vehicula massa lorem ut orci. Curabitur faucibus nec quam vel vestibulum. Morbi ipsum justo, imperdiet ut laoreet non, feugiat consectetur neque. Pellentesque rutrum bibendum risus, in gravida nisi tristique condimentum. Integer quis varius nulla, sit amet consectetur dui. In rutrum accumsan justo. Maecenas id elementum nisl, nec vulputate justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum facilisis varius. Suspendisse potenti. Maecenas lobortis, justo sed facilisis venenatis, lacus dolor semper ex, in interdum risus metus ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget porta magna.

Vestibulum cursus vitae nulla in aliquam. Vivamus tincidunt ultricies vehicula. Proin nec nunc velit. Nulla sit amet accumsan lacus. Donec nunc purus, egestas ut lorem eget, pretium molestie lectus. Donec pellentesque tempor libero, id sollicitudin tortor finibus at. Donec sagittis nisl eget leo molestie commodo. Nullam posuere felis sed mi euismod, at mattis sapien pellentesque. Morbi sed dui molestie, feugiat sem in, accumsan nisl. Vivamus luctus blandit lacus nec imperdiet. Pellentesque non dapibus risus. Suspendisse vestibulum odio purus, nec placerat eros ultricies nec. Curabitur aliquam sollicitudin ligula, vitae semper ante ornare ac.

Proin gravida bibendum urna id dictum. Morbi nec venenatis odio, nec pulvinar nisi. Sed vehicula nunc augue, eu fringilla magna ornare sed. Curabitur ut eleifend magna. Sed elementum odio dignissim turpis scelerisque, in pulvinar mauris vehicula. Donec dignissim ante velit, vitae imperdiet ipsum placerat at. Etiam id rutrum eros, maximus consectetur ex. Praesent egestas tellus et aliquam rutrum. Praesent eget faucibus odio. Proin quis libero eget risus faucibus faucibus. Curabitur feugiat nibh nec dignissim tempor. Nam ac eros nulla.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  </body>
</html>

짐

당신은 별도의 CSS가 필요하지 않습니다 . Bootstrap 유틸리티 클래스를 사용하십시오. 오른쪽 열을 왼쪽 열 (짧은 열)의 높이로 만들려면 여기에 설명 된position: absolute 대로 사용해야합니다 .

이를위한 부트 스트랩 클래스가 있습니다.

h-100 position-absolute overflow-hidden 오른쪽 열 내부 div에
overflow-hidden 카드 3에

<div class="container">
    <div class="row">
        <div class="col-md-6 border">
            <div class="card shadow m-5">
                <div class="card-body" style="height:300px;">
                    <h3>Card 1</h3>
                </div>
            </div>
        </div>
        <div class="col-md-6 border">
            <div class="d-flex flex-column h-100 position-absolute overflow-hidden">
                <div class="d-flex align-items-start">
                    <div class="card shadow m-5">
                        <div class="card-body">
                            <h3>Card 2</h3>
                        </div>
                    </div>
                </div>
                <div class="d-flex align-items-stretch overflow-hidden">
                    <div class="card shadow m-5 overflow-auto">
                        <div class="card-body">
                            <h3>Card 3</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus massa nec nisl placerat sollicitudin. Phasellus mi massa, sollicitudin eu facilisis sit amet, consequat sit amet urna. Suspendisse laoreet ipsum et varius lobortis. Duis facilisis dui vel finibus dignissim. Nulla facilisi. Donec porttitor nec justo sit amet dapibus. Nam in iaculis purus. Aliquam at blandit sem. Aenean auctor varius iaculis. In pellentesque orci quis ipsum dapibus, eu mattis nisi feugiat. Cras sollicitudin, magna eget semper placerat, leo dui convallis leo, eget vehicula massa lorem ut orci. Curabitur faucibus nec quam vel vestibulum. Morbi ipsum justo, imperdiet ut laoreet non, feugiat consectetur neque. Pellentesque rutrum bibendum risus, in gravida nisi tristique condimentum. Integer quis varius nulla, sit amet consectetur dui. In rutrum accumsan justo. Maecenas id elementum nisl, nec vulputate justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum facilisis varius. Suspendisse potenti. Maecenas lobortis, justo sed facilisis venenatis, lacus dolor semper ex, in interdum risus metus ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget porta magna. Vestibulum cursus vitae nulla in aliquam. Vivamus tincidunt ultricies vehicula. Proin nec nunc velit. Nulla sit amet accumsan lacus. Donec nunc purus, egestas ut lorem eget, pretium molestie lectus. Donec pellentesque tempor libero, id sollicitudin tortor finibus at. Donec sagittis nisl eget leo molestie commodo. Nullam posuere felis sed mi euismod, at mattis sapien pellentesque. Morbi sed dui molestie, feugiat sem in, accumsan nisl. Vivamus luctus blandit lacus nec imperdiet. Pellentesque non dapibus risus. Suspendisse vestibulum odio purus, nec placerat eros ultricies nec. Curabitur aliquam sollicitudin ligula, vitae semper ante ornare ac. Proin gravida bibendum urna id dictum. Morbi nec venenatis odio, nec pulvinar nisi. Sed vehicula nunc augue, eu fringilla magna ornare sed. Curabitur ut eleifend magna. Sed elementum odio dignissim turpis scelerisque, in pulvinar mauris vehicula. Donec dignissim ante velit, vitae imperdiet ipsum placerat at. Etiam id rutrum eros, maximus consectetur ex. Praesent egestas tellus et aliquam rutrum. Praesent eget faucibus odio. Proin quis libero eget risus faucibus faucibus. Curabitur feugiat nibh nec dignissim tempor. Nam ac eros nulla.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

데모

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

부트 스트랩 4 카드를 배열하는 방법

부트 스트랩 4 카드를 배열하는 방법

부트 스트랩 4 카드를 나누는 방법

부트 스트랩 4에서 카드를 감싸는 (부동) 방법

부트 스트랩 4에서 col-md 내부 중간에 카드를 설정하는 방법

부트 스트랩 4 카드 헤더의 항목을 정렬하는 방법

부트 스트랩 4 navbar를 축소하는 방법

고정 왼쪽 부트 스트랩 4를 CSS하는 방법

2 개의 열을 분리하기 위해 부트 스트랩 4 카드 본체 클래스를 나누는 방법

부트 스트랩 카드 열을 얻는 방법?

부트 스트랩 4로 드롭 다운 메뉴를 배치하는 방법은 무엇입니까?

부트 스트랩 행 클래스를 사용하여 카드 용 열 3 개를 만드는 방법

부트 스트랩 4를 사용하여 양식 내부에 버튼을 중앙에 배치하는 방법

부트 스트랩에서 카드 배경색을 변경하는 방법

부트 스트랩-4 열 그리드

단일 열 그리드에서 부트 스트랩 카드를 플로팅하는 방법

모바일에서 데스크탑과 동일한 부트 스트랩 4 카드 구조를 표시하는 방법은 무엇입니까?

부트 스트랩 4 접기는 동일한 카드를 엽니 다.

부트 스트랩 4 : CSS없이 배경 이미지를 포함하는 방법

부트 스트랩 4에서 고정 상단 Navbar를 중앙에 배치하는 방법

부트 스트랩 4-카드가 열로 잘립니다.

텍스트를 부트 스트랩 열로 감싸는 방법

그리드의 부트 스트랩 4에서 sticky-top 클래스를 사용하는 방법

부트 스트랩 4를 사용하여 텍스트를 세로로 정렬하는 방법

부트 스트랩 4 그리드를 관리하는 방법은 무엇입니까?

부트 스트랩을 사용하여 방문 카드를 디자인하는 방법

부트 스트랩으로 열 / 행을 배열하는 방법

부트 스트랩 카드 패널에 사진을 삽입하는 방법

부트 스트랩 카드 행을 하단에 맞추는 방법

부트 스트랩 행 "col-md-4"를 전체 화면 크기로 만드는 방법

이미지의 아래쪽과 옆에 텍스트를 정렬하고 CSS 부트 스트랩 4를 사용하여 같은 행에 배치하는 방법