如何在耐克运行俱乐部页面上做出列表css

Question

我在耐克运行俱乐部页面上看到了一个美丽的页面。

我特别喜欢它的布局其List的css。

在PC上时，它显示为一个图库，但当它在移动设备上时，它显示为一个列表。

我做了什么：

1. 我试图找出事件列表上的CSS类（通过使用Chrome检查）。
2. 我发现这个类叫做：events-group
3. 我试图找到这个类的位置，但是该页面上引用的所有css文件都被缩小了，所以我不知道如何弄清楚它。

谢谢你的帮助。

这里是网址：Nike Run Club

更新

感谢mkaminsky，我使用的网站unminify这些文件，仍然无法找到在事件组类是。

所以我想通过使用Bootstrap来做到这一点？

Answer 1

它们在815px处有断点，您可以使用媒体查询让列在折点处折叠。

如果您使用的引导程序或基础等框架不应该是问题。

Answer 2

自己动手

我个人喜欢用Flexbox的。

HTML

<div id="gallery"> 
    <div class="item">item 1</div> 
    <div class="item">item 2</div> 
</div> 

CSS

#gallery{ 
    -ms-box-orient: horizontal; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 

.item{ 
    width: 25%; 
} 
@media screen and (max-width: 768px) { /*when less than 768px*/ 
    .item{ 
     width: 100%; 
    } 
} 

要看看他们做了什么

有一个静态的CSS文件（https://www.nike.com/events-registration/client-dist/styles/multi-main.min.css?v=1427736422699）。您可以将其加载到http://unminify.com/。

但是，加载了一些其他文件。

if (window.nike && window.nike.exp && window.nike.exp.script && window.nike.exp.script.device_detect && window.nike.exp.script.device_detect.isMobile()) { 
     // mobile 
     nike.events.gadgetCss = "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"" + nike.events.PROTOCOL + "//m.nike.com/" + nike.events.COUNTRY + "/" + nike.events.LANGUAGE_CODE + "/style.css?app=nikestore&version=latest&assets=skin_onenike,nike,nike.gadget.mobile.OneNikeFooter,nike.gadget.mobile.OneNikeNav,nike.style.nsg.nsg-mobile,nike.style.exp.exp-mobile,skin.onenike_mobile&assetType=STYLE\">"; 
     nike.events.gadgetJs = "<script src=\"" + nike.events.PROTOCOL + "//m.nike.com/" + nike.events.COUNTRY + "/" + nike.events.LANGUAGE_CODE + "/NikeScriptManager.js?app=nikestore&version=latest&assets=nike,nike.gadget.mobile.OneNikeFooter,nike.gadget.mobile.OneNikeNav,nike.geo.StoreConfiguration&assetType=SCRIPT\"><\/script>"; 
    } else { 
     // desktop 
     nike.events.gadgetCss = "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"" + nike.events.PROTOCOL + "//" + nike.events.STORE_HOST + "/" + nike.events.COUNTRY + "/" + nike.events.LANGUAGE_CODE + "/style.css?app=nikestore&version=latest&assets=nike,nike.gadget.OneNikeNav,nike.gadget.OneNikeFooter,nike.style.nsg.nsg-desktop,nike.style.exp.exp-desktop&assetType=STYLE\">"; 
     nike.events.gadgetJs = "<script src=\"" + nike.events.PROTOCOL + "//" + nike.events.STORE_HOST + "/" + nike.events.COUNTRY + "/" + nike.events.LANGUAGE_CODE + "/NikeScriptManager.js?app=nikestore&version=latest&assets=nike,nike.fonts.Selector,nike.fonts.glyphPolyfill,nike.gadget.OneNikeNav,nike.gadget.OneNikeFooter,yepnope.injectCss&assetType=SCRIPT\"><\/script>"; 
    } 
document.write(nike.events.gadgetCss); 
document.write(nike.events.gadgetJs); 

所以你可能也想看看。

Answer 3

您可以使用Online Minifiers取消清除CSS。

这里是unminified版本：0​​

我所用的步骤：

1. 视图源的网站
2. 在标题上，找到样式表。
3. 打开样式表，复制内容，
4. 粘贴内容到unminifier

关于事件组类：■ 的events-group类是在CSS或JS完全未使用。它只是一个用来将所有三个日历事件分组的事件。

我假设你正在试图找出如何让整个事件布局...

inner-wrapper：中心垂直文本

multi-card：构建/格式每张卡

ul ：（events-group）不显示任何要点

以下是他们所做的最简单的形式：http://jsfiddle.net/mfLaup65/

如果你想让它更具包容性，你可以复制所有的CSS。

我个人认为你应该检查出Bootstrap。它有许多功能可以做类似的事情。耐克的精确度非常高，并且有很多CSS可以做很简单的事情。