我想要這些照片在同一行我應該改變什么？
我嘗試了向左浮動和其他命令，但一張圖片停留在右下角。
<section id="services">
<div class="container">
<div class="row wow fadeInUp">
<div class="col-md-4">
<img src="resimler/bimplus.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">BIMPLUS</h4>
<p>HNP</p>
</div>
<div class="col-md-4">
<img src="resimler/brighe.jpg" class="wow fadeInRight" height="80px">
<h4 class="wow fadeInRight delay-2s">BRIDGE</h4>
<p>HNP</p>
</div>
<div class="col-md-4">
<img src="resimler/precast.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">PRECAST</h4>
<p>HNP</p>
<div class="col-md-4">
<img src="resimler/precast.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">PRECAST</h4>
<p>HNP</p>
</div>
</div>
</div>
</section>
和 style.css 檔案我嘗試了 margin-left ， float left 但我無法改變。
#services
{
background-color: #efefef;
padding-top: 80px;
padding-bottom: 80px;
}
#services .col-md-4
{
padding: 20px;
}
#services .col-md-4 h4
{
padding: 5px;
}
#services .col-md-4 img
{
width: 200px;
display: inline-block;
}
#services .col-md-4 p
{
padding: 5px;
text-align: justify;
}
uj5u.com熱心網友回復：
您可以使用display: flex;它來解決此問題，因為它更靈活，這是一個示例：
<section class="services">
<div class="service">
<img src="service.jpg">
<h3>Service</h3>
<p>Service Description...</p>
</div>
<div class="service">
<img src="service.jpg">
<h3>Service</h3>
<p>Service Description...</p>
</div>
<div class="service">
<img src="service.jpg">
<h3>Service</h3>
<p>Service Description...</p>
</div>
<div class="service">
<img src="service.jpg">
<h3>Service</h3>
<p>Service Description...</p>
</div>
</section>
.services {
display: flex;
justify-content: space-between;
background: #eee;
padding: 40px;
}
.services .service {
background: #ccc;
padding: 10px;
}
您可以在此處閱讀有關 flexbox 的資訊：https ://www.w3schools.com/css/css3_flexbox.asp
uj5u.com熱心網友回復：
在 < p>HNP</ p> 之后添加 </ div> 以關閉您的標簽
然后，將col-md-4更改為col-md-3以便您可以獲得 4 列
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/470278.html
標籤：javascript html jQuery css 引导程序 4
上一篇：雙擊任何單元格將被洗掉