1
我想要做的是拍摄两张响应图像,并在页面为xs时将它们旋转为水平,内联和居中。我已经设法让它工作。但是当我在最大的视图中时,图像是内联的,我希望它们垂直显示。当我缩小页面时,图像会回到垂直显示状态,直到达到xs点。 这里的HTML如何在xs视图中居中对齐图像并旋转到水平
<div class="row">
<div class="col-md-11 col-xs-12 col-sm-11">
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="/images/first image.JPG" alt="First slide image" width="596" height="450" class="center-block">
<div class="carousel-caption">
<h3>First slide Heading</h3>
<p>First slide Caption</p>
</div>
</div>
<div class="item"><img src="/images/second image.jpg" alt="Second slide image" width="582" height="450" class="center-block">
<div class="carousel-caption">
<h3>Second slide Heading</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="item"><img src="/images/IMG_1826.JPG" alt="Third slide image" width="588" height="441" class="center-block">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
</div>
<div class="icons col-md-1 col-lg-1 col-sm-1 col-xs-12" id="logobox"><img src="/wood-instagram-icon.png" alt="Placeholder image" class="img-responsive" id="logo"><img src="/facebook-log-wood.png" alt="Placeholder image" class="img-responsive" id="logo"></div>
而这里的CSS
}
#logo {
max-width: 50px;
max-height: 50px;
display: inline-block;
}
.icons.col-xs-12 #logobox {
display: inline-block;
}
#logobox {
text-align: center;
}
伟大的工程谢谢。这需要我花一点时间才能完全理解它,但除此之外,这正是我需要的。对于我定义的id是在alt =“”中定义的? – youngsquid
@youngsquid我很乐意提供帮助。 'alt'不定义任何。我用'alt'作为评论。你可以改变它到你需要的。 –
当你说这个ID必须是唯一的两个图像你指的是什么? – youngsquid