Question

我期待像这张图片Link

在图像中有5个图像并链接到虚线图像..

我可以知道，如何使用bootstrap类进行显示。

我很困惑，有人可以帮我解决这个问题吗？

谢谢，

以下是使用表格标记的代码：

<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。（编辑：但是希望使用他提供的图片，请参阅评论。）

要回答有关列数的问题（10对比Bootstrap网格12），您需要了解您并不总是需要填充所有12列。在这里，我们每个图像使用2列，加上第一列作为偏移，你得到五个图像，居中，左边有一个偏移列，右边有一个空列，没关系！

请注意，我使用img-responsive类来确保您的图片在2列之外永远不会变得太大，并且我在类{{1}中使用了xs（意思是“超小”） }，这意味着所有设备屏幕尺寸都会在同一条线上获得五个图像（并调整大小以适应），这可能不是您想要更小的设备......

具有相同行的五个图像的Bootstrap

2 个答案: