bootstrap 3 - 格式化div和css问题

Question

我有两个问题：

• Divs未正确对齐
• 如果缩略图图像超出其所在div的宽度，如何强制缩略图像水平排列，并使用水平滚动条（用于滚动）？

我不想使用任何外部的js图书馆。我试图让它在纯CSS和bootstrap 3中工作。

以下是我目前的情况：

<div class="row">
      <div class="col-md-10">

            <div class="item">
                   <div class="row">
                    <div class="col-md-5">
                        <div class="row">
                                <div class="col-md-5">
                                        <div class="main-img">
                                                <img height="500px" width="500px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>  
                                        </div>
                                </div>

                                <div class="col-md-5">
                                        <div class="row">
                                                <div class="img-list">
                                                        <div class="col-md-3">
                                                                <img width="100px" height"100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                                        </div>

                                                        <div class="col-md-3">
                                                                <img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                                        </div>

                                                        <div class="col-md-3">
                                                                <img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                                        </div>

                                                        <div class="col-md-3">
                                                                <img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>  
                    </div>

                    <div class="col-md-7">
                                <span> Title! </span>
                                <span> Some other text!</span>
                    </div>
                </div>  
            </div>

    </div>

    <div class="col-md-2">
     <!-- Some other html here -->
    </div>

</div>

我画了一个布局应该是什么的图像：

棕色区域是col-md-10，其中包含以下内容：

• 粉色区域是主要的img（col-md-5）
• 粉红色下面的深灰色区域是缩略图的水平列表（缩略图是col-md-3，不确定是否最好？）
• 浅灰色区域只是文字说明（col-md-7）

虽然我没有绘制col-md-2（位于col-md-10棕色区域的右侧）。

相反，我看到一堆div飞到了整个地方。缩略图列表浮动在右上角，但主img和col-md-7正确并排。缩略图列表甚至没有正确对齐。有人可以帮忙吗？

Answer 1

这里你去......

http://jsfiddle.net/MUVG5/

<div class="row">
    <div class="col-md-10">

        <div class="item">
            <div class="row">

                <div class="col-md-5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="main-img">
                                <img height="500px" width="500px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>  
                            </div>
                        </div>
                    </div>  
                    <div class="row">
                        <div class="col-md-12">
                            <div class="img-list">
                                <div class="col-md-3">
                                    <img width="100px" height"100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                </div>

                                <div class="col-md-3">
                                    <img width="100px" height="100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                </div>

                                <div class="col-md-3">
                                    <img width="100px" height="100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                </div>

                                <div class="col-md-3">
                                    <img width="100px" height="100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>

                <div class="col-md-7">
                    <span> Title! </span>
                    <span> Some other text!</span>
                </div>

            </div>  
        </div>

    </div>

    <div class="col-md-2">
        <!-- Some other html here -->
    </div>

</div>

如果您不希望拇指折叠：http://jsfiddle.net/MUVG5/1/