잡동사니

Bootstrap 4 확장형 카드 헤더에 간격 및 배치 문제와 회전 아이콘이 있습니다.

카테고리 없음
2020. 8. 7. 20:10
반응형

질문

확장 및 축소가 가능한 제목 / 본문 및 닫기 button이있는 부트스트랩 4 카드를 만드는 중입니다. 이 튜토리얼을 따르고 있습니다. 카드 접기 요령!

나는 예제를 좋아하지만 두 가지를하고 싶다.

  • move expand icon to left of card-header
  • add close button to right of card-header

이 jsfiddle에서 다음 두 가지를 시도했습니다.

https://jsfiddle.net/s0ygr35L/1/

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

my attempt:

<div class="card ml-5 mr-5 mt-5">
    <h5 class="card-header expandable">

        <!-- method2 -->
        <a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
            <div class="row " style='margin-bottom:0;'>
                
                <div class="col-md-1 ">
                    <i class="rotate fa fa-chevron-down "></i>
                </div>
                
                <div class="col">
                    <p>Collapsible Group Item #1</p>
                </div>
                
                <div class="col">
                    <i class="fa fa-close pull-right"></i>
                </div>
             
            </div>
        </a>
         
        
    </h5>
    <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
            officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
            wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
            excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
            you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>



example:


<div class="card ml-5 mr-5 mt-5">
    <h5 class="card-header expandable">
        <!-- method1  -->
        <a data-toggle="collapse" href="#collapse-example2" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
            <i class="fa fa-chevron-down pull-right"></i>
            Collapsible Group Item #1
        </a>
        
        
    </h5>
    <div id="collapse-example2" class="collapse show" aria-labelledby="heading-example">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
            officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
            wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
            excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
            you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>
Expand snippet

첫 번째 카드는 내 시도입니다. 헤더에 열 / 행 섹션을 추가했지만 이로 인해 하단에 원치 않는 빈 공간이 생겼습니까? 여기에 이미지 설명 입력

padding-bottom = 0 및 margin-bottom = 0을 갖도록 스타일을 설정하려고 시도했지만 수정되지 않았습니다.CSS 코드로 인해 카드가 확장 / 축소 될 때마다 카드 제목 오른쪽에있는 닫기 button도 회전합니다. CSS 식별자를 더 구체적으로 만들려고했지만 아이콘이 계속 회전합니까?

누구든지 나를 도울 수 있습니까?

  • remove the blank space at the bottom of my card-title
  • prevent my close icon button from rotating

답변1

문제는 카드 헤더에 추가 요소를 추가하기 때문입니다. 헤더, 확장기 및 닫기 아이콘에 대한 Grid를 추가 할 필요가 없습니다. 이미 부트스트랩 class를 사용하여 배치 할 위치를 지정하고 있습니다. 이 Grid는 작은 화면에서 레이아웃을 분할하는 것뿐만 아니라 당신이 이야기했던 공간을 추가하는 것입니다.

이것이 헤더에 필요한 전부입니다.

<h5 class="card-header expandable">
    <a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
        <i class="rotate fa fa-chevron-down "></i>
         Collapsible Group Item #1
        <i class="fa fa-close pull-right"></i>
    </a>
</h5>

회전 닫기 아이콘의 경우 확장기 아이콘을 회전해야하는 코드가 닫기 아이콘에도 적용된다는 것이 문제입니다. CSS에 rotate class를 추가하여 해당 class가 추가 된 class에만 적용되도록 할 수 있습니다.

.expandable .collapsed .rotate.fa{
      transform: rotate(180deg);
}

아래에서 모두 작동하는 것을 볼 수 있습니다.

.expandable .fa {
      transition: .3s transform ease-in-out;
    }
.expandable .collapsed .rotate.fa{
      transform: rotate(180deg);
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="card ml-5 mr-5 mt-5">
    <h5 class="card-header expandable">

        <!-- method2 -->
        <a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
                    <i class="rotate fa fa-chevron-down "></i>
                     Collapsible Group Item #1
                    <i class="fa fa-close pull-right"></i>
        </a>
         
        
    </h5>
    <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
            officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
            wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
            excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
            you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>
Expand snippet



답변2

flex 속성을 추가하고 그 안에 3 개의 요소를 모두 감싸면됩니다. 아래를 참조하세요.

.expandable .fa {
      transition: 0.3s transform ease-in-out;
      display: flex;
      margin-right: 10px;
    }
    .expandable .collapsed .fa{
      transform: rotate(180deg);
    }
    
    .card-header .d-flex{
      display: flex;
      justify-content: space-between;
      align-items: center;
    } 
    .card-header p{
      display: flex;
    }
<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<div class="card ml-5 mr-5 mt-5">
    <h5 class="card-header expandable">
        <!-- method1 
        <a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
            <i class="fa fa-chevron-down pull-right"></i>
            Collapsible Group Item #1
        </a> -->
        
        <!-- method2 -->
        <a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
            <div class="row " style='margin-bottom:0;'>
                
                <!-- <div class="col-md-1 ">
                    
                </div> -->
                
                <div class="col d-flex ">
                   <div class="d-flex">
                      <i class="rotate fa fa-chevron-down "></i>
                      <p class="mb-0">Collapsible Group Item #1</p>
                   </div>
                  <i class="fa fa-close pull-right"></i>
                </div>
                
                <!-- <div class="col">
                    <i class="fa fa-close pull-right"></i>
                </div> -->
             
            </div>
        </a>
         
        
    </h5>
    <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
            officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
            wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
            excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
            you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>
Expand snippet

https://jsfiddle.net/에서도 확인하세요.



 

 

 

 

출처 : https://stackoverflow.com/questions/63184972/bootstrap-4-expandable-card-header-has-spacing-wrapping-issues-and-rotating-ic

반응형
저작자표시

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band
댓글

티스토리툴바