具有相同行的五个图像的引导程序

Question

我期待像这张图片Link

图片中有 5 张图片和虚线图片的链接..

请问，如何使用引导类进行显示。

我很困惑，谁能帮我解决这个问题？

谢谢，

下面是使用table标签的代码：

<td class="tdbodycontent" id="workDemo">
                <div class="wrapper" style="height:340px;">
                    <table class="tblhomecontent dotted" cellpadding="0" cellspacing="0">
                        <tbody><tr>
                            <td colspan="5">
                                <div class="boxtitle">
                                    How it works</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="box5col">
                                <div class="marker_1 center">
                                </div>
                                <p class="markerContent">
                                    Sign Up for free</p>
                            </td>
                            <td class="box5col">
                                <div class="marker_2 center">
                                </div>
                                <p class="markerContent">
                                    Select the<br>
                                    neighborhoods<br>
                                    you want to follow</p>
                            </td>
                            <td class="box5col">
                                <div class="marker_3 center">
                                </div>
                                <p class="markerContent">
                                    Invite friends and<br>
                                    family to join</p>
                            </td>
                            <td class="box5col">
                                <div class="marker_4 center">
                                </div>
                                <p class="markerContent">
                                    Receive important<br>
                                    alerts and information<br>
                                    from trusted sources</p>
                            </td>
                            <td class="box5col">
                                <div class="marker_5 center">
                                </div>
                                <p class="markerContent">
                                    Share information<br>
                                    with friends<br>
                                    securely</p>
                            </td>
                        </tr>
                    </tbody></table>
                </div>
            </td>

我需要在引导中进行转换，这是图片链接dotted，step-1，step-2，step-3，step-4，step-5

Answer 1

这可能对你有用。 或者您需要编写自定义媒体 css 样式来实现此目的。

<div class="row">
    <div class="col-md-2 col-md-offset-1"><img src="images/sample.jpg"></div>
    <div class="col-md-2"><img src="images/sample.jpg"></div>
    <div class="col-md-2"><img src="images/sample.jpg"></div>
    <div class="col-md-2"><img src="images/sample.jpg"></div>
    <div class="col-md-2"><img src="images/sample.jpg"></div>
</div>

Answer 2

在anu g prem的解决方案的基础上，为虚线添加一些东西，加上一些解释。

Live example

<div class="container">
  <div class="row steps">
    <hr class="col-xs-8 col-xs-offset-2" />

    <div class="col-xs-2 col-xs-offset-1"><img src="http://s22.postimg.org/pq17qfgwd/step_1.png" class="img-responsive"></div>
    <div class="col-xs-2"><img src="http://s22.postimg.org/5u58avzv1/step_2.png" class="img-responsive"></div>
    <div class="col-xs-2"><img src="http://s22.postimg.org/58g9es4st/step_3.png" class="img-responsive"></div>
    <div class="col-xs-2"><img src="http://s22.postimg.org/576bld2z1/step_4.png" class="img-responsive"></div>
    <div class="col-xs-2"><img src="http://s22.postimg.org/g9bejsx1p/step_5.png" class="img-responsive"></div>

  </div>
</div>

.steps {
    position: relative;
}

.steps hr {
    /* Use the 3 lines below to use a dotted line image file as background of the <hr> */
    border: none;
    background: transparent url('http://s22.postimg.org/53ci53xht/dotted.png') no-repeat center center;
    height: 2px;
    /* Use the line below instead to style the <hr> with a border */
    /*border-top: 1px dashed gray;*/

    margin-top: 0;
    margin-bottom: 0;
    position: absolute;
    top: 50%;
}

.steps .img-responsive {
    margin: 0 auto;
}

您会注意到我没有使用您的虚线，而是使用了<hr>，并用虚线设置了border-top 的样式。 （编辑：但 op 想要使用他提供的图像，请参阅 cmets。）

要回答有关列数的问题（10 与 Bootstrap 网格的 12），您需要了解您并不总是必须填写所有 12 列。在这里，我们为每个图像使用 2 列，加上第一列作为偏移量，您将获得五张图像，居中，左侧有一个偏移量列，右侧有一个空列，这很好！

请注意，我使用img-responsive 类来确保您的图像在它们的 2 列之外不会变得太大，并且我在 col-xs-2 类中使用了xs（意思是“超小”），这意味着所有设备屏幕尺寸将使五个图像在同一行上（并调整大小以适应），这对于较小的设备可能不想要...