Question

我用缩略图创建简单的帖子列表我创建了这段代码：

                <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
                            <div class="news">
                                <div class="news-thumb text-center">
                                    <img src="images/NewsThumb.png" alt="" class="img-responsive" />
                                </div>
                                <div class="news-excerpt">
                                    <p>
                                        Content
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
                            <div class="news">
                                <div class="news-thumb text-center">
                                    <img src="images/NewsThumb.png" alt="" class="img-responsive" />
                                </div>
                                <div class="news-excerpt">
                                    <p>
                                        Content
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

但是在FullHD（1920px）上我得到col-sm- *的值 - 为什么？ http://prntscr.com/an1097

Answer 1

这是因为col-sm上面的视口没有上面的偏移列偏移。这意味着您的页面将显示为具有三列偏移的6个中心列 - 即使在较大的屏幕上也是如此。

<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">

您需要将以下（col-md-offset-0）添加到每个父div以防止-md和-lg中的偏移并允许两个div并排显示：

 <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-0">

我刚测试了它，它现在可以工作并且并排显示列 - 查看操作中的代码片段（在全屏模式下 - 列是相邻的，在小窗口中它们是垂直堆叠的。注意我添加了彩色背景证明了这一点。

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:red">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
                            <div class="news">
                                <div class="news-thumb text-center">
                                    <img src="images/NewsThumb.png" alt="" class="img-responsive" />
                                </div>
                                <div class="news-excerpt">
                                    <p>
                                        Content
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0"  style="background:blue">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
                            <div class="news">
                                <div class="news-thumb text-center">
                                    <img src="images/NewsThumb.png" alt="" class="img-responsive" />
                                </div>
                                <div class="news-excerpt">
                                    <p>
                                        Content
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Bootstrap - 屏幕上的列错误

1 个答案: