gpt4 book ai didi

html - Bootstrap 奇怪的网格对齐

转载 作者:太空宇宙 更新时间:2023-11-04 09:26:33 25 4
gpt4 key购买 nike

你们中的一些人可以解释一下为什么我的 Bootstrap 网格表现得很奇怪吗?

最终的结果一定是下图这样的: enter image description here

但是当我编写代码并检查它时,浏览器版本与 psd 版本不同……这是怎么回事?红色框来 self 的浏览器 View ( chrome )。

enter image description here

有什么线索吗?

.facts { color: #fff; background: linear-gradient(  rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(https://s27.postimg.org/7kjcvsxc3/facts_bg.jpg) 0 0 no-repeat; background-size: cover; padding: 40px 0; width: 100%; min-height: 505px; }
.facts-content { text-align: center; }
.facts-content h3 { font-family: "Gotham-Book", sans-serif; font-size: 47px; line-height: 55px; padding: 0 5px; text-transform: uppercase; margin: 38px 0 41px 0; }
.facts-content h3 span { color: #00c0ff; }

.item h4 { font-family: "Gotham-Black", sans-serif; font-size: 40px; line-height: 49px; padding: 0 5px; }
.item h4 > span { font-family: "Gotham-Light", sans-serif; }
.item p { font-family: "Lato-Regular", sans-serif; font-size: 16px; line-height: 22px; padding: 0 5px; }
.item a { display: block; margin-bottom: 27px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section class="facts">
<div class="container">
<div class="facts-content">
<h3>some <span>facts</span> about us</h3>
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="item">
<a href="#">
<img src="https://s16.postimg.org/z29j3y5s1/ideas.png" width="124" height="124" title="someText" alt="someText">
</a>
<h4>14<span>&#37;</span></h4>
<p>Proin hendrerit velit a lectus vel nibh tincidunt</p>
</div>
<!-- item -->
</div>
<!-- col-md-3 -->

<div class="col-md-3 col-sm-3">
<div class="item">
<a href="#">
<img src="https://s16.postimg.org/4jjqizgld/green_earth.png" width="125" height="126" title="someText" alt="someText">
</a>
<h4>25<span>&#37;</span></h4>
<p>Proin hendrerit velit a lectus vel nibh tincidunt</p>
</div>
<!-- item -->
</div>
<!-- col-md-3 -->

<div class="col-md-3 col-sm-3">
<div class="item">
<a href="#">
<img src="https://s16.postimg.org/4yzlpqrwh/leafs.png" width="126" height="126" title="someText" alt="someText">
</a>
<h4>75<span>&#37;</span></h4>
<p>Proin hendrerit velit a lectus vel nibh tincidunt</p>
</div>
<!-- item -->
</div>
<!-- col-md-3 -->

<div class="col-md-3 col-sm-3">
<div class="item">
<a href="#">
<img src="https://s16.postimg.org/5d0xpcc01/solar_panels.png" width="130" height="132" title="someText" alt="someText">
</a>
<h4>90<span>&#37;</span></h4>
<p>Proin hendrerit velit a lectus vel nibh tincidunt</p>
</div>
<!-- item -->
</div>
<!-- col-md-3 -->
</div>
<!-- row -->
</div>
<!-- facts-content -->
</div>
<!-- container -->
</section>
<!-- facts -->

最佳答案

如果您担心特定的像素对齐,请不要担心。在具有如此多不同屏幕尺寸和分辨率的移动世界中,精确计算像素没有多大意义。您的输出看起来不错并且捕获了 PSD 的精神。不要试图 100% 准确地排列事物。这是徒劳的努力,几乎没有任何好处。

关于html - Bootstrap 奇怪的网格对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41040033/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com