Question

我是一名新的网页设计师，我现在正在努力设计无需子弹的水平显示的无序图标列表。

这是我的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/

你能告诉我怎么做吗？

Answer 1

你可以尝试这个：

#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

Answer 2

如果您希望仅通过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无效。

如何使用Bootstrap水平设计无序的图像列表？

2 个答案: