3つのイメージをブートストラップでインラインに配置するにはどうすればよいですか？

Question

javascriptクラス用に1ページのWebアプリケーションを作成しているので、それらを格納してリンクする場所を一緒にスローするのはちょっとしたアイデアだと思っていました。

androidやiosと似ているが、私はアプリへのリンクのためのいくつかのアイコンを持つページを持っている。私は私が好きなようにそれらを中心に置くことができましたが、私はちょっとしたものに遭遇しました。私が直面している問題は、正しくスケーリングする方法です。私はそれらをウェブページ全体に広げたくありません。

次のように現在、私のHTMLはなります

<div class="container-fluid"> 
    <div class="row"> 
     <div class="content col-xs-4"> 
      <a href="./flickr" class="img responsive"> <img alt="Flickr" style="height: 100%; width: 100%; display: block;" src="css/img/flickr.png" data-holder-rendered="true"> </a> 
     </div> 
     <div class="content col-xs-4"> 
      <a href="./notepad" class="img responsive"> <img alt="Notepad" style="height: 100%; width: 100%; display: block;" src="css/img/notepad.png" data-holder-rendered="true"> </a> 
     </div> 
     <div class="content col-xs-4"> 
      <a href="http://aug.ie" class="img responsive"> <img alt="Url Shortener" style="height: 100%; width: 100%; display: block;" src="css/img/link.png" data-holder-rendered="true"> </a> 
     </div>   
    </div> 
</div> 

将来的には、私はより多くのアプリケーションを作成するときに、私はこのページにそれにアイコンやリンクを追加するかなり簡単時間を持っているしたい場合。ブートストラップに列のサイズ変更の方法が含まれていますか？おそらく行のサイズを変更する必要がありますか？

私は現時点では馴染みのない地域にいるので、どんな助けにも感謝します。ありがとう！

Answer 1

私はあなたがこれを使用する理由は本当にわからない：

style="height: 100%; width: 100%; display: block;" 

それは、冗長であるため、ブートストラップこれは外にありませんimg-responsiveクラスのボックス。しかし、あなたのコード例では、あなたが書かれている：私は彼らが全体のウェブページにまたがるしたくない

：img responsive代わり

img-responsiveのあなたは、と言いました。

containerを使用すると、12列グリッド内のすべての項目が含まれます。 container-fluidを使用すると、ウェブページ全体にまたがります。

私の例では、col-sm-4を使用しました。あなたのページが768px以上であれば、どの列が3列になるでしょうか。携帯電話に3列を持ちたい場合は、col-xs-4を使用してください。しかし、常にあなたが合計12を得ることを確認してください。

これを試してみてください：

<div class="container"> 
     <div class="row"> 
      <div class="content col-sm-4"> 
       <a href="./flickr" class="img-responsive"> <img alt="Flickr" src="css/img/flickr.png" data-holder-rendered="true"> </a> 
      </div> 
      <div class="content col-sm-4"> 
       <a href="./notepad" class="img-responsive"> <img alt="Notepad" src="css/img/notepad.png" data-holder-rendered="true"> </a> 
      </div> 
      <div class="content col-sm-4"> 
       <a href="http://aug.ie" class="img-responsive"> <img alt="Url Shortener" src="css/img/link.png" data-holder-rendered="true"> </a> 
      </div>   
     </div> 
    </div> 

Answer 2

は1次試してみてください。

.row li { 
 
    width: 33.3%; 
 
    float: left; 
 
} 
 

 
img { 
 
    border: 0 none; 
 
    display: inline-block; 
 
    height: auto; 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
}

<div class="row"> 
 
    <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center"> 
 
    <ul> 
 
     <li> 
 
     <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" /> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>