目标:我试图移动我的形象在我的网站我的英雄空间高于SM屏幕上的行动呼吁。
到目前为止采取的步骤:我已经查看了getbootstrap上的订购文档。我可以把图像移到顶部,但我不能把它放在我想要的地方。
我已经添加了我的代码。有人能指出为什么我在这里得不到预期的结果吗?
null
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid hero back1 text-center">
<div class="row">
<div class="col-md-6 col-12">
<h1 class="heroText">Get More Jobs<br>Save money<br>Improve Performance!</h1>
</span>
</h1>
<h2 class="heroSubText">
Powerful Job Scheduling For Service Contractors!
</h2>
<button class="btn btn-cta order-sm-2" type="button"><a href="https://calendly.com/servicelead/15min">Schedule a Free Consultation
</button></a>
<span class="order-sm-3"><br>No more burden of 100 calls a day!</span>
</div>
<div class="col-md-6 col-12 order-sm-1">
<img class="img-fluid peopleImg shadow-lg" src="https://servicelead.com/assets/images/plumber-1.jpg" alt="people working">
</div>
</div>
</div>
null
首先,您的HTML无效:标签关闭而未打开,a
作为按钮
的子项
要回答您的问题,可以使用order-xx-last
注意:记住bootstrap-4是mobile first方法,所以在此基础上编写HTML。
null
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid hero back1 text-center">
<div class="row">
<div class="col-md-6 col-12 order-md-last">
<img class="img-fluid peopleImg shadow-lg" src="https://servicelead.com/assets/images/plumber-1.jpg" alt="people working">
</div>
<div class="col-md-6 col-12">
<h1 class="heroText">Get More Jobs<br>Save money<br>Improve Performance!</h1>
<h2 class="heroSubText">
Powerful Job Scheduling For Service Contractors!
</h2>
<a href="https://calendly.com/servicelead/15min">
<button class="btn btn-cta" type="button">Schedule a Free Consultation </button>
</a>
<span><br>No more burden of 100 calls a day!</span>
</div>
</div>
</div>