2016-08-16 10 views
1

3枚の画像を設定するにはどのようにブートストラップは左に、中央上の画像と右の私がいることを試みた3枚のブートストラップ、左、中央および

同じラインで設定する方法:第二の画像がある

<div class="row"> 
    <img class="col-md-3 pull-right" src="images/right.png" alt="right"> 
    <img class="col-md-3 center-block" src="images/center.png" alt="center"> 
    <img class="col-md-3 pull-left" src="images/left.png" alt="left"> 
</di> 

しかしを中心にない。

左右の画像は、ページの隅にある必要があります。

答えて

1

は、それはあなたが達成したいですか?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-4"><img alt="" src="//placehold.it/200x200/c69/fff/?text=left" class="img-responsive"></div> 
 
    <div class="col-md-4"><img alt="" src="//placehold.it/200x200/9c6/fff/?text=center" class="img-responsive center-block"></div> 
 
    <div class="col-md-4"><img alt="" src="//placehold.it/200x200/69c/fff/?text=right" class="img-responsive pull-right"></div> 
 
    </div> 
 
</div>

+0

はい!ありがとう – ricardo

1

各imgにはcol-md-4を入力するだけでサンプルがチェックアウトされます。コードスニペットを実行し、フルページで開き、適切に表示します。

または

サンプルを表示するには、リンクに従ってください:Sample Link

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<img class="col-md-4" src="http://vignette1.wikia.nocookie.net/logopedia/images/a/a4/Google-Currents-Featured-300x300.png" alt="right"> 
 
    <img class="col-md-4" src="http://vignette1.wikia.nocookie.net/logopedia/images/a/a4/Google-Currents-Featured-300x300.png" alt="center"> 
 
    <img class="col-md-4" src="http://vignette1.wikia.nocookie.net/logopedia/images/a/a4/Google-Currents-Featured-300x300.png" alt="left">

+0

この画像に整列していない:LEFT ------------ CENTER -------------- RIGHT。 – ricardo

+0

@ricardoこれでうまくいくでしょう。 –

関連する問題