Как создать неупорядоченный список изображений по горизонтали с помощью Bootstrap?

Я новый веб-дизайнер, и сейчас я борюсь за разработку неупорядоченного списка значков, которые будут отображаться горизонтально без пули.Как создать неупорядоченный список изображений по горизонтали с помощью Bootstrap?

Вот мой HTML код:

<section id="call-to-action" class="section-padding"> 
     <div data-velocity="-.3" class="overlay-bg cta-bg"></div> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-8 col-md-offset-2"> 
        <div class="cta-text text-center"> 
         <h2>Call to action</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius labore itaque, nam eaque aut repellat ratione nesciunt explicabo numquam sit.</p> 
         <div class="partners"> 
          <ul style="list-style: none;"> 
           <li> 
            <img class="img-responsive" 
             title="Illustrator" alt="Illustrator" 
             src="../Assets/img/software/illustrator_icon.png" /> 
            <img class="img-responsive" 
             title="Photoshop" alt="Photoshop" 
             src="../Assets/img/software/photoshop_icon.png" /> 
            <img class="img-responsive" 
             title="InDesign" alt="InDesign" 
             src="../Assets/img/software/inDesign_icon.png" /> 
           </li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
    <!-- End call to action -->

CSS код:

#call-to-action { 
    position: relative; 
} 
.section-padding { 
    padding: 50px 0; 
} 
     .partners ul { 
      list-style: none; 
      margin: 0; 
      padding: 0; 
     } 
      .partners ul li { 
       display: inline-block; 
       float: left; 
       width: 20%; 
      }

Вот ссылка на JSFiddle, который включает все мой код: https://jsfiddle.net/nta1qov2/

Не могли бы вы сказать мне, как Я могу сделать это?

источник

2016-03-23 Tech Lover

вы можете попробовать это:

#call-to-action { 
    position: relative; 
} 
.section-padding { 
    padding: 50px 0; 
} 
     .partners ul { 
      list-style: none; 
      margin: 0; 
      padding: 0; 
     } 
      .partners ul li { 
       display: inline-block; 
       float: left; 
       /*width:20%; remove width 20% ;*/ 
       width: 100%; /* add width :100%;*/ 
      }

DEMO HERE

Добавить этот CSS код ":

.partners ul li { 
       position: absolute; 
       text-align:center; 
       display: inline-block; 
       width: 100%; 

      }

[UPDATED DEMO HERE]2

источник

2016-03-23 05:53:11

@lvin Raj, благодарю за помощь. Я просто попробовал свой код, и значки по-прежнему отображаются вертикально. Я использую изображения значков с iconfinder.com со следующими размерами: 128 * 128 –

@lvin Raj, Cold, пожалуйста, скажите мне, как их центрировать? –

я объясню wait sir @TechLover –

Если вы хотите сделать это через только twitter-bootstrap, то следующий код иллюстрирует тот же:

HTML:

<div class="form-group"> 
    <div class="pull-left control-label"> 
     <img src="../img1.jpg" /> 
    </div> 
    <div class="pull-left control-label"> 
     <img src="../img2.jpg" /> 
    </div> 
    <div class="pull-left control-label"> 
     <img src="../img3.jpg" /> 
    </div> 
    </div> 
    <div class="clearfix"></div>

Здесь pull-left, чтобы сделать неупорядоченный горизонтальный список. control-label для правого углубления. form-group для вертикального углубления. clearfix для аннулирования float в результате pull-left после завершения.

источник

2016-03-23 06:03:40 Shashank

Как создать неупорядоченный список изображений по горизонтали с помощью Bootstrap?

ответ

Смежные вопросы