我有这个代码,它有交替的图像和文本,但在移动设备上它应该是文本和图像/文本和图像,但我得到的是文本和图像/图像和文本强>
[1]<!-- Project One -->
<div class="row">
<div class="col-md-6">
<h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Two -->
<div class="row">
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-6">
<h3>Project Two</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
最佳答案
放置 img
然后放置 text
并使用 pull-right
和 pull-left
类对齐。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class=container>
<div class="row clearfix">
<div class="col-md-6 pull-right">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-6 pull-left">
<h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Two -->
<div class="row">
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-6">
<h3>Project Two</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
关于html - Bootstrap 在移动 View 中重新排序图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42711416/