老师 col-8 是怎么分的 和col-md-3 col-4 col-md-9

老师 col-8 是怎么分的 和col-md-3 col-4 col-md-9

老师 col-8 是怎么分的 和col-md-3 col-4 col-md-9 是怎么分的 老师 这里有点迷

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>三星案例</title>

<link rel="stylesheet" href="css/base.css">

<link rel="stylesheet" href="css/grid.css">

<link rel="stylesheet" href="css/index.css">

</head>

<body>

<header class="header-container">

<div class="container">

<div class="row">

<div class="header-logo-container col-8 col-md-3">

<a href="./index.html" class="header-logo"><img src="img/logo.svg" alt=""></a>

</div>

<div class="header-btn-container col-4 d-md-none">

<button type="button" class="btn-toggle" id="btn-toggle">

<span class="btn-toggle-bar"></span>

<span class="btn-toggle-bar"></span>

<span class="btn-toggle-bar"></span>

</button>

</div>

<div class="header-nav-container col-md-9 d-none d-md-block">

<ul class="header-nav">

<li class="header-nav-item">

<a href="###" class="header-nav-link">手机&amp;平板</a>

</li>

<li class="header-nav-item">

<a href="###" class="header-nav-link">电视&amp;影视</a>

</li>

<li class="header-nav-item">

<a href="###" class="header-nav-link">生活家电</a>

</li>

<li class="header-nav-item">

<a href="###" class="header-nav-link">电脑/办公/存储</a>

</li>

<li class="header-nav-item">

<a href="###" class="header-nav-link">网上商城</a>

</li>

</ul>

</div>

</div>

</div>

</header>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2020-06-07 11:03:23

同学你好,问题解答如下:

“col-”是设置超小屏样式,“ col-md-”是设置中屏样式,具体如下:

http://img1.sycdn.imooc.com//climg/5edc58dd0990e45828440663.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师