[英]Bootstrap container not aligning properly
I recently used bootstrap to help me align my projects portfolio on my website. 最近,我使用了引导程序来帮助我调整网站上的项目组合。 Certainly it did what i was expecting except the time i run the website on my mobile.
当然,除了我在手机上运行网站的时间以外,它确实达到了我的期望。 I used container on every div element to keep it inside the area but the result is totally different.
我在每个div元素上使用了容器,以将其保留在该区域内,但结果完全不同。
If i run the mobile phone emulator inside a desktop browser it will display the expected result however, if i run it in real cell phone the result is all messed up. 如果我在桌面浏览器中运行手机仿真器,它将显示预期的结果,但是,如果我在真实的手机中运行,结果将被弄乱。
The link to my website is- www.ijatin.ca
and visit the project section inside it and try to run on mobile phone emulator and on real phone you would see 2 different results. 链接到我的网站是
www.ijatin.ca
并访问其中的项目部分,并尝试在手机模拟器和真实手机上运行,您会看到2种不同的结果。 Can anyone tell, why is there such a difference and how can i overcome it? 谁能说出来,为什么会有这样的区别,我该如何克服呢? Thanks so much
非常感谢
I see that you've used Bootstrap 4 and the best formation of usage should be like, 我发现您使用过Bootstrap 4,最好的用法如下:
container -> [row -> col-* -> card] [row -> col-* -> card] [row -> col-* -> card] end of container
. container -> [row -> col-* -> card] [row -> col-* -> card] [row -> col-* -> card] end of container
。
But in your code 但是在你的代码中
container -> [row -> col-* -> card] end of container, container -> [row -> col-* -> card] end of container, container -> [row -> col-* -> card] end of container
You don't have to have a container div for each row. 您不必每行都有一个容器div。 Container divs can be placed as a parent where you would want to place your child elements within a bootstrap specific width.
容器div可以作为父项放置,您希望将子项放置在引导程序特定宽度内。 So I suggest to change your code like below
所以我建议像下面这样更改您的代码
<article id="work" style="display: block;" class="active">
<div class="container">
<h2 class="major">Projects</h2>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12"> <!-- change column size according to your need -->
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github"> Github</span></a>
<a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop"> Website</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github"> Github</span></a>
<a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop"> Website</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github"> Github</span></a>
<a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop"> Website</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container offset-lg-1 row">
<div class="card col-md-7 col-sm-12 offset-md-2 offset-lg-2 float-left project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="row">
<a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github"> Github</span></a>
<a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop"> Website</span></a>
</div>
</div>
</div>
</div>
<div class="container offset-lg-1 row">
<div class="card col-sm-12 col-lg-7 flaot-right project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="row">
<a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github"> Github</span></a>
<a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop"> Website</span></a>
</div>
</div>
</div>
</div>
<div class="container col-sm-12 offset-lg-1 row">
<div class="card col-md-7 col-sm-12 offset-md-2 offset-lg-2 float-left project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="row">
<a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github"> Github</span></a>
<a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop"> Website</span></a>
</div>
</div>
</div>
</div>
<div class="close">Close</div>
</article>
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.