引导3-格式化div和css问题

Question

我有两个问题：

• Div没有正确地对齐
• 如何强制缩略图水平排列，如果缩略图图像超过了它们所在的div的宽度，则使用水平滚动条(用于滚动)？

我不想使用任何外部js图书。我试图让它在纯css和引导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 5)。
• 粉红下面的深灰色区域是缩略图的水平列表(缩略图是col-md-3，不确定这是不是最好的？)
• 浅灰色区域只是文字描述(Col 7)。

不过，我并没有画出2(这是在-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/