Question

我正在努力解决这个问题，我需要这个页面内容http://stirringminds.com/partners/才能响应，但我更改了代码，现在不知道该怎么做。

HTML：

<div class="row">
<div class="col-md-2" style="position:relative;top:10px;">
<button id="showall" class="active" style="font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;border:none;">ALL DEALS</button>
<button id="show" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">BUSINESS</button>
<button id="show2" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DESIGN</button>
<button id="show3" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DEVELOPMENT</button>
<button id="show4" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">MARKETING</button>
<button id="show5" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">SALES</button>
<button id="show6" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">SUPPORT</button>
<button id="show7" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">PRODUCTIVITY</button>
<button id="show8" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DIY</button>
<button id="show9" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">LEARNING</button>
<button id="show10" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">LIFE</button>
</div>

<a href="https://aws.amazon.com" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/aws_logo_web_300px.png"/><span style="position:relative;bottom:15%;left:7%;color:#000;">Amazon Web Services</span><br><span style="color:#888;position:relative;left:48.5%;bottom:50%;padding-right:-100px;">$1000 credits for 1 year.</span></div></a>

<div class="col-md-4 dealsdiv" id="designfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/Ameyo-emerge-logo-white.png" style="position:relative;top:28%;"/></div>

<div class="col-md-4 dealsdiv" id="devfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/citrus-pay-e1496117866677.png" style="position:relative;top:20%;"/></div>

<div class="col-md-4 dealsdiv" id="mktfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/cl.png" style="position:relative;top:15%;"/></div>
</div>

我试图将它与https://startup.deals（滚动一点点）相似，使用垂直菜单（带有“ALL DEALS，BUSINESS，DESIGN”）也改为水平但是当我调整浏览器的大小时窗口，我的页面变得一团糟......

Answer 1

您必须在css文件中包含此内容。

   @media only screen and (max-width: 768px) {
       .row > .col-md-2 {
        display: flex;
        overflow-x: scroll;
      }
    }

在.row或.col-md-2的标记中提供有意义的类名，并在上面的代码段中更新相同的

Answer 2

尝试将所有div放在

下

<div class="container"></div>

它可能有效：）

尝试让此页面响应

2 个答案: