0
ページに4つの内部divを含むBootstrapコンテナがあります（これらは実際のWebアプリケーションで動的にレンダリングされます）。特定の例では、3つの内部divをレンダリングするだけですが、段落の1つを削除すると、コンテナ内の残りの内容が左側に浮動します（CSSのfloatタグのため）。 3段落を左に浮かせるのではなく、どのように配置することができますか？コンテナ内の可変個数のdivの中心合わせ
<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では、フレックスボックスベースの列クラスを利用できます。これはあなたが必要とするものを行うはずです。 – bobbyz