Javascript 引导容器未正确对齐
我最近使用bootstrap来帮助我调整我网站上的项目组合。当然,它做了我所期待的,除了我在手机上运行网站的时候。我在每个div元素上都使用了container来保持它在区域内,但结果完全不同 如果我在桌面浏览器中运行手机模拟器,它将显示预期的结果。但是,如果我在真实的手机中运行它,结果就会一团糟 我的网站链接是-Javascript 引导容器未正确对齐,javascript,html,css,alignment,bootstrap-4,Javascript,Html,Css,Alignment,Bootstrap 4,我最近使用bootstrap来帮助我调整我网站上的项目组合。当然,它做了我所期待的,除了我在手机上运行网站的时候。我在每个div元素上都使用了container来保持它在区域内,但结果完全不同 如果我在桌面浏览器中运行手机模拟器,它将显示预期的结果。但是,如果我在真实的手机中运行它,结果就会一团糟 我的网站链接是-www.ijatin.ca,请访问其中的项目部分,尝试在手机模拟器和真实手机上运行,您将看到两种不同的结果。 谁能告诉我,为什么会有这样的差异,我如何才能克服它? 非常感谢我知道您已经
www.ijatin.ca
,请访问其中的项目部分,尝试在手机模拟器和真实手机上运行,您将看到两种不同的结果。
谁能告诉我,为什么会有这样的差异,我如何才能克服它?
非常感谢我知道您已经使用了Bootstrap 4,最好的用法应该是,
容器->[行->列-*->卡][行->列-*->卡][行->列-*->卡]容器的结尾
但是在您的代码中
容器->[行->列-*->卡]容器结束,容器->[行->列-*->卡]容器结束,容器->[行->列-*->卡]容器结束
您不必为每一行设置容器div。容器div可以作为父元素放置,您希望将子元素放置在引导特定的宽度内。因此,我建议如下更改您的代码
<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>
通过电子邮件收集调查变得很容易
为资源较少的小型企业开发了一个调查应用程序。在网站上注册后,用户将能够向其客户发送电子邮件以提供反馈。将显示反馈的结果
在仪表板上。
通过电子邮件收集调查变得很容易
为资源较少的小型企业开发了一个调查应用程序。在网站上注册后,用户将能够向其客户发送电子邮件以提供反馈。将显示反馈的结果
在仪表板上。
卡片标题
一些基于卡片标题的快速示例文本,构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本,构成了卡片内容的大部分
卡片
一些基于卡片标题的快速示例文本,构成了卡片内容的大部分
接近
这看起来像
希望这有帮助