0
페이지에 4 개의 내부 div가 포함 된 부트 스트랩 컨테이너가 있습니다 (실제 웹 응용 프로그램에서 동적으로 렌더링 됨). 어떤 경우에는 3 개의 내부 div 만 렌더링하지만, 단락 하나를 제거하면 컨테이너의 나머지 내용이 왼쪽으로 떠 있습니다 (CSS의 float 태그로 인해). 어떻게 3 단락을 왼쪽으로 뜨게하지 않고 센터로 배치 할 수 있습니까? 가변 개수의 컨테이너 가운데 정렬
<div class="expertise_section text-center">
<div class="row">
<div class="container">
<h2>Centered Headline</h2>
<div class="expertise_section_inner row">
</div>
<!-- ***** if the below is removed, the remaining 3 divs do not center correctly -->
<div class="expertise_div blue_div" >
<div class="expertise_content">
<p>Paragraph 1...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>
<div class="expertise_div green_div" >
<div class="expertise_content">
<p>Paragraph 2...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>
<div class="expertise_div maroon_div">
<div class="expertise_content">
<p>Paragraph 3...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>
<div class="expertise_div orange_div">
<div class="expertise_content">
<p>Paragraph 4...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>
</div>
</div>
</div>
CSS의
은 다음과 같습니다 :@charset "utf-8";
.expertise_section {
padding: 85px 0;
}
.expertise_section h2 {
font-weight:500;
margin-top:7px;
}
.expertise_div {
float: left;
width: 24.2%;
margin-right:1.05%;
}
.expertise_div:nth-child(4n+4) {
margin-right:0px;
}
.expertise_div p {
font-family: 'Open Sans', sans-serif;
color: #6c6c6c;
font-weight: 300;
}
.expertise_content {
border-bottom: 2px solid #45acba;
border-top: 2px solid #45acba;
margin: 18px 0;
padding: 26px 0;
}
.expertise_content p:last-child {
margin-bottom:2px;
}
.expertise_div a {
color: #3a9cab;
font-size: 14px;
font-weight: 500;
}
.expertise_section_inner {
margin-top:36px;
}
.green_div .expertise_content {
border-color:#8ebb29;
}
.green_div a {
color:#8ebb29;
}
.maroon_div .expertise_content {
border-color:#81515d;
}
.maroon_div a {
color:#81515d;
}
.orange_div .expertise_content {
border-color:#d86435;
}
.orange_div a {
color:#d86435;
}
.show_1023 {
display:none;
}
@media only screen and (max-width: 1199px) {
.container {
padding:0px 35px !important;
}
}
@media only screen and (max-width: 1023px) {
.expertise_div {
float: left;
margin-right: 3.2%;
width: 48%;
margin-bottom:53px;
}
.expertise_div:nth-child(2n+2) {
margin-right: 0;
}
.expertise_section {
padding: 85px 0 30px;
}
.expertise_section_inner {
padding: 0 101px;
}
header {
padding: 20px 15px;
}
}
@media only screen and (max-width: 951px) {
.container {
padding: 0 30px !important;
text-align: center;
}
}
@media only screen and (max-width: 767px) {
.container {
padding: 0 30px !important;
text-align: center;
}
.expertise_section {
padding: 78px 0 45px;
}
.expertise_div {
width:100%;
margin-right:0px;
margin-bottom:31px;
}
.expertise_section_inner {
padding: 0;
margin-top:33px;
}
.hide_767 {
display:none;
}
.show_767 {
display:block;
}
}
@media only screen and (max-width: 479px) {
.container {
padding: 0 30px !important;
text-align: center;
}
.hide_480 {
display:none !important;
}
.show_479 {
display:block !important;
}
}
jsfiddle은 여기에 있습니다 : https://jsfiddle.net/PaulPerkins/4zh6k6oL/2/
확실하지 않음 새로운 Bootstrap v4에서는 flexbox 기반 컬럼 클래스를 활용할 수 있습니다. 이것은 당신이 필요로하는 것을해야합니다. – bobbyz