html - Bootstrap CSS - 视频页面 - 令人头疼的布局

Question

我正在为来自 YouTube 的视频源开发一个页面。提要本身很好，我可以毫无问题地获取视频，但我正在尝试使用 Bootstrap CSS 以响应式方式布局页面，以便它在任何设备上都能很好地呈现，但我无法获取我的了解 Bootstrap 令人困惑的布局网格。

当我从 YouTube 抓取提要时，我也抓取了他们为每个视频提供的多个缩略图。简而言之，我每个都有一个大、中、小图像。我想使用这些缩略图(每个都包裹在一个 anchor 中并链接到 YouTube 上的实际视频，但这部分超出了这个问题的范围)。我只想将页面上的缩略图大致排列如下:

• 小屏幕(即手机):
  小图片 - 每行 1 张 - 这样我就能得到一堆单张图片

• 小屏幕(即小型平板电脑或上网本):
  小图片 - 每行 2 或 3 张 - 以网格/表格形式呈现

• 中等屏幕(即横向模式下更大的平板电脑)
  中等图像 - 每行 2 或 3 个 - 在网格/表格中

• 大屏幕(即普通显示器、全尺寸笔记本电脑)
  中等图像 - 每行 4 或 5 个 - 在网格/表格中

• X-Large screen(即大/宽屏显示器)
  大图像 - 每行 3,4 或 5 个(取决于显示器的大小)

我混淆了响应式网格，其中 Bootstrap 实际调整图像大小，并使用媒体查询在不同大小的缩略图之间切换。它开始让我有些头疼，老实说，我什至不确定我上面描述的布局是否是最佳布局，因此，如有任何建议，我们将不胜感激。

这是我目前所处的位置。这是一个 MVC 页面，其中混合了 C# 内联代码。如果这让它太困惑，我将通过编辑将其删除，但我只是以原始形式发布我所获得的内容。只要说@foreach 行是一个循环，花括号内的所有内容都会在每个图像中重复:

<div class="container-fluid">
    <div class="row">
    @foreach (var mix in ((List<Studio96.Models.DjMix>)Model.Contents))
    {
        <div class="video">
            <div class="s col-md-2">
                <div style="max-width: @(mix.SmallThumb.Width)px" class="thumbnail nomargin">
                    <a href="@mix.Link">
                        <div class="title">@mix.Title</div>
                    </a>
                    <div class="thumbnail nomargin">
                        <a href="@mix.Link">
                            <img src="@mix.SmallThumb.Url" alt="@mix.Title" />
                        </a>
                    </div>
                </div>
            </div>

            <div class="m col-md-2">
                <div style="max-width: @(mix.MediumThumb.Width)px" class="thumbnail nomargin">
                    <a href="@mix.Link">
                        <div class="title">@mix.Title</div>
                    </a>
                    <div class="thumbnail nomargin">
                        <a href="@mix.Link">
                            <img src="@mix.MediumThumb.Url" alt="@mix.Title" />
                        </a>
                    </div>
                </div>
            </div>

            <div class="l col-md-3">
                <div style="width: @(mix.MediumThumb.Width)px;" class="thumbnail nomargin">
                    <a href="@mix.Link">
                        <div class="title">@mix.Title</div>
                    </a>
                    <div class="thumbnail nomargin">
                        <a href="@mix.Link">
                            <img src="@mix.MediumThumb.Url" alt="@mix.Title" />
                        </a>
                    </div>                    
                </div>
            </div>

            <div class="x col-md-6"> 
                <div style="max-width: @(mix.LargeThumb.Width)px" class="thumbnail nomargin">
                    <a href="@mix.Link">
                        <div class="title">@mix.Title</div>
                    </a>
                    <div class="thumbnail nomargin">
                        <a href="@mix.Link">
                            <img src="@mix.LargeThumb.Url" alt="@mix.Title" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    }
    </div>
</div>

和 CSS...

.video {
    font-weight: bold;
    margin-bottom: 20px;
}

.video .title {
    padding: 5px;
    height: 40px
}

.video .nomargin {
    margin-bottom: 1px !important;
}

@media (max-width:349px) {
    .video .s { display: block }
    .video .m { display: none }
    .video .l { display: none }
    .video .x { display: none }
}

@media (min-width:350px) and (max-width:749px) {
    .video .s { display: none }
    .video .m { display: block }
    .video .l { display: none }
    .video .x { display: none }
}

@media (min-width:750px) and (max-width:959px) {
    .video .s { display: none }
    .video .m { display: none }
    .video .l { display: block }
    .video .x { display: none }
}

@media (min-width:960px) {
    .video .s { display: none }
    .video .m { display: none }
    .video .l { display: none }
    .video .x { display: block }
}

Answer 1

不要使用您的 .s .m .l 和 .x。

Bootstrap 有 hidden-[size] 或 visible-[size] 所以你可以看到 visible-xs。顾名思义，它将在超小屏幕上显示。

对于布局，使用 col-[size]-[1-12] 在中型屏幕上显示 50% 宽度的元素使用 .col-md-6。所以 100/12 * 6 = 50%(剩下的算一下:))

希望对你有帮助

**编辑:**

<div class="col-xs-6 col-sm-3 col-md-2 col-lg-2"> <!--how big/many columns-->
            <div style="max-width: @(mix.MediumThumb.Width)px" class="thumbnail nomargin">
                <a href="@mix.Link">
                    <div class="title">@mix.Title</div>
                </a>
                <div class="thumbnail nomargin">
                    <a href="@mix.Link">
                        <!--different images for diferent size-->
                        <img class="vissible-lg" src="@mix.MediumThumb.Url" alt="@mix.Title" />
                        <img class="vissible-md" src="@mix.MediumThumb.Url" alt="@mix.Title" />
                        <img class="vissible-sm" src="@mix.MediumThumb.Url" alt="@mix.Title" />
                        <img class="vissible-xs" src="@mix.MediumThumb.Url" alt="@mix.Title" />
                    </a>
                </div>
            </div>
        </div>