1
私がしようとしているのは、2つの反応しやすい画像を取り、ページがxsのときに水平、インライン、中央に回転させることです。私はそれを働かせるように管理しました。しかし、私が最大の視野にいるとき、画像を縦に表示したいときは、画像はインラインです。ページを小さくすると、xsポイントに達するまで画像が垂直に表示されます。 は、ここでのhtmlxsビューで画像を整列させ、水平にも回転する方法
<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>
だとここで私は2つのノート持っている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'はanytingを定義しません。私はコメントとして 'alt'を使用しました。必要なものに変更することができます。 –
IDが2つの画像で一意でなければならないと言ったら、あなたは何を指していましたか? – youngsquid