我是 Bootstrap 的新手,需要帮助。
如您在我的代码中所见,我将文本和图像分为四列。我使用媒体查询(如 CSS 所示)根据屏幕尺寸设置了对齐方式。但是,如果我正在调整窗口大小并达到平板电脑 View 的屏幕大小,您可以说(检查屏幕截图 1)它看起来很乱,因为文本太大而且图像离文本太近。因此,在这个屏幕尺寸下,即平板电脑 View ,我希望我的列垂直对齐(如屏幕截图 2),但我希望我的图像位于左侧,文本和标题应位于图像旁边。但它不应该打扰移动 View ,因为一切都在移动 View 的中心(检查屏幕截图 3),这对我来说已经很完美了。
如果我的问题还不够清楚,请查看模板http://www.templatemonster.com/demo/58152.html
他们有我喜欢的“工作团队”部分。
我期待得到帮助!
谢谢!
<div class="jumbotron">
<div id="wrapper"> <!--Wrapper-->
<div class="container"> <!--Container-->
<div class="row" style="padding-bottom: 40px;">
<div class="col-md-12" align="center">
<h1>Meet Us</h1><hr class="style1"></hr>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img src="images/11.jpg" class="img-circle img-responsive" width="180"/>
</div>
<div class="col-sm-3">
<h2 class="style1">Shaikh Obaidullah</h2>
<h3 class="style1">CEO / Web Developer</h3>
<hr class="style2"></hr>
<p class="style1">I will be taking care of product development stages such as Requirements, Development, Functionality, Usability, and Technical Support.</p>
</div>
<div class="col-sm-3">
<img src="images/12.jpg" class="img-circle img-responsive" width="180"/>
</div>
<div class="col-sm-3">
<h2 class="style1">Ovais M. Shaikh</h2>
<h3 class="style1">Graphic Designer</h3>
<hr class="style2"></hr>
<p class="style1">I will spice up your product with creative and unique designs so that you get the most attracted product in the end.</p>
</div>
</div>
</div> <!--Container-END-->
</div> <!--Wrapper-END-->
.jumbotron {
background-image: url('../images/13.jpg');
background-attachment: fixed;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.img-responsive {
margin: 0 auto;
}
#wrapper {
background-color: #FFF;
background: rgba(0,0,0,.7);
color: #FFF;
padding-bottom: 40px;
}
hr.style1 {
margin-bottom: 30px;
margin-top: 30px;
width: 100px;
border-top: 2px solid #8884bc;
}
@media (min-width: 768px) {
h2.style1{
color: #8884bc;
text-align: left;
margin-bottom: 0px;
}
h3.style1{
text-align: left;
margin-top: 10px;
}
hr.style2 {
margin-bottom: 50px;
margin-top: 50px;
margin-left: 0px;
width: 100px;
border-top: 2px solid #8884bc;
}
p.style1{
font-size: 20px;
text-align: left;
color: #eee;
}
.jumbotron{
margin-bottom: 0px;
}
}
@media only screen and (max-width:768px) {
hr.style2 {
margin-bottom: 30px;
width: 100px;
border-top: 2px solid #8884bc;
}
h2.style1{
color: #8884bc;
text-align: center;
margin-bottom: 0px;
}
h3.style1{
text-align: center;
margin-top: 5px;
font-size: 20px;
}
p.style1{
margin-bottom: 80px;
font-size: 16px;
text-align: center;
color: #eee;
}
}
最佳答案
我不知道我是否清楚地了解你。但我认为你的代码必须是这样的:
<div class="row">
<<div class="col-md-5">
<div class="left">
<img>
</div>
<div class="right">
<h1>
some text
</h1>
</div>
</div>
<<div class="col-md-5">
<div class="left">
<img>
</div>
<div class="right">
<h1>
some text
</h1>
</div>
</div>
</div>
类 right 必须是 float:right;,left 必须是 float:left; ,amd col-md-5 必须显示:inline-block;
关于html - 如何根据屏幕尺寸对齐图片和文字?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38809192/