Bootstrap 2 does not float image

Asked

Viewed 139 times

1

I’m having a problem trying to put one image next to another with Bootstrap:

<ul class="thumbnails">
     <li class="span4">
          <div class="thumbnail">
               <a href="#" class="thumbnail inner-border">

                   <img class="foto" src="uploaded/<?= $linha->img_nome; ?>">
               </a>
               <h3>Descrição da imagem: <?= $linha->titulo ?></h3>
               <p>Texto da pagina: <?= $linha->texto_da_imagem ?></p>
          </div>
     </li>
</ul>

I do not know why the image does not want to float, would be the version of Bootstrap?

css twitter-bootstrap

  • You have placed all images within the same <ul tag>?

  • yes they are the same then they come dynamically, this code is right?

  • 2

    Could provide a functional example of the problem using jsfiddle or stacksnippets (including css and html)?

1 answer

1


You have two options, the first, to preserve your code, is to put everything between rows:

<div class="row">
  <div class="col-md-3">
<ul class="thumbnails">
     <li class="span4">
          <div class="thumbnail">
               <a href="#" class="thumbnail inner-border">

                   <img class="foto" src="uploaded/&lt;?= $linha-&gt;img_nome; ?&gt;">
               </a>
               <h3>Descrição da imagem: <!--?= $linha--->titulo ?&gt;</h3>
               <p>Texto da pagina: <!--?= $linha--->texto_da_imagem ?&gt;</p>
          </div>
     </li>
</ul> 
</div>
</div>

Example

The second, which I advise, is to remove the ul, that do not look cool inside the Rows, and stick only with the standard table:

<div class="row">  
  <div class="col-md-3">
          <div class="thumbnail span4">
               <a href="#" class="thumbnail inner-border">
                   <img class="foto" src="uploaded/&lt;?= $linha-&gt;img_nome; ?&gt;">
               </a>
               <h3>Descrição da imagem: <!--?= $linha--->titulo ?&gt;</h3>
               <p>Texto da pagina: <!--?= $linha--->texto_da_imagem ?&gt;</p>
          </div>
    </div>
</div>

The important thing is to keep the dynamics inside the Row, respecting the limit of 12 established in the bootstrap.

Example

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.