如何在Materialize CSS中创建7列网格？
在Materialize CSS中创建7列网格，可以使用栅格系统来实现。Materialize CSS提供了一个灵活的栅格系统，可以将页面分割为12个列。要创建7列网格，可以将页面分割为7个相等的列，并使用相应的类来定义每个列的宽度。
以下是在Materialize CSS中创建7列网格的步骤：
- 在HTML文件中引入Materialize CSS的样式文件和脚本文件。可以通过CDN链接或下载文件到本地进行引入。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>- 在HTML文件中创建一个包含栅格的容器元素。可以使用
div元素，并添加container类。
<div class="container">
<!-- 栅格内容 -->
</div>- 在容器元素中创建7个列元素。可以使用
div元素，并添加相应的类来定义每个列的宽度。
<div class="row">
<div class="col s1">列1</div>
<div class="col s1">列2</div>
<div class="col s1">列3</div>
<div class="col s1">列4</div>
<div class="col s1">列5</div>
<div class="col s1">列6</div>
<div class="col s1">列7</div>
</div>在上述代码中，col类用于定义列，s1类用于定义每个列的宽度。根据栅格系统的设计，每个列的宽度将自动计算为容器的宽度的相应比例。
- 可以根据需要在列元素中添加内容或其他组件。
<div class="row">
<div class="col s1">
<p>列1内容</p>
<button class="btn">按钮</button>
</div>
<!-- 其他列元素 -->
</div>通过以上步骤，就可以在Materialize CSS中创建一个包含7列网格的布局。根据需要，可以在每个列中添加内容、按钮、图像等其他组件。
请注意，以上答案中没有提及腾讯云相关产品和产品介绍链接地址，因为要求答案中不能提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的一些云计算品牌商。如需了解腾讯云相关产品和产品介绍，请参考腾讯云官方文档或官方网站。
相关·内容
15回答
我已经使用npm安装了materialize-css，但我不确定如何在JSX代码中实际使用Materialize类。我应该从materialize-css导入什么？或者我只需要在我的主index.html文件中包含CSS？
我主要希望在网格系统中使用它，因为我将使用material-ui作为实际的UI组件。
浏览 4提问于2016-02-19得票数 46
我正在使用物化CSS，想要做一个7列网格。做2、3、4、6等很容易，但是12不能被整除的事情呢？如何调整7列？div> <div class="col s6 m3 l2 ">7</div>CSSbackg
浏览 1提问于2018-08-24得票数 0
回答已采纳
如何使用其特殊功能创建Materialize CSS输入，如占位符和输入中的图标？我想找到一种方法来创建它而不使用materialize CSS，因为我正在使用另一个CSS框架，而我不想使用多个框架来防止框架增加的错误？
浏览 9提问于2018-09-02得票数 0
3回答
我已经按照顺序在我的MaterializeCSS文件中安装了react物化并添加了对index.html文件的引用：(...)<script sr
浏览 1提问于2019-12-30得票数 0
回答已采纳
2回答
材质+角度6如何配置？
、、、
我在一般的角度上是新的，我尝试使用和角度6，我使用CLI来创建我的组件。angular.json尝试修改：
"styles": [/node_modules/materialize-css/dist/
浏览 1提问于2018-08-02得票数 3
我使用webpack作为我的绑定器/加载器，我可以很好地加载materialize css (js/css)，但是当我尝试使用toast时，它说我通过以下命令将库包含在主index.js文件中：
import 'materialize-css/bin/materialize.css' import '
浏览 4提问于2016-08-18得票数 5
我想把"materializecss“的效果和控制应用到我的博客中。目前我使用的是博客提供的简单博客模板。有什么办法可以做到吗？
浏览 0提问于2016-10-04得票数 1
2回答
我有一个.cshtml文件，其中包含搜索/上传/下载/保存按钮，使用materialize.min.css对这些按钮进行样式化，并在同一页中使用ag-grid来显示网格中上传的文件数据。但不幸的是，ag网格中的checkbox无法工作(即不能选中复选框)，因为CSS of materialize.min.css正在应用于checkbox元素，而不是ag-grid复选框CSS。我试过用下面的方法来解决这个问
浏览 1提问于2020-10-19得票数 1
3回答
我使用的是物化CSS前端框架，并使用边距:0 auto；就像我一直使用的那样，并且做了一个噩梦，让这个div以它的父服务器为中心。怎么回事？ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/m
浏览 12提问于2016-08-22得票数 0
回答已采纳
我所做的是：在定义我的新Vue应用程序的main.js中，我像这样导入Materialize：不知何故，javascript可以工作，但CSS不能加载；我用对其进行了测试。我还想使用“普通”的HTML元素，而不是使用100个新元素(例如在vuetify中)。
浏览 1提问于2018-10-24得票数 8
回答已采纳
我正在寻找一种方法来创建单独的组件CSS文件从库，如物化CSS或Vuetify。因此，例如，我想创建一个button.css文件，而不是Materialize css，它只包含与按钮相关的_button.scss。我想对vuetify中的手写笔组件做同样的事情。
有没有
浏览 7提问于2019-05-22得票数 1
3回答
我创建了一个angular4项目，其中包含了angular。我想去图书馆。中添加了对css和js文件的引用。/node_modules/materialize-css/dist/css/materialize.css""scripts": [
"..如何创建动态元素，如旋转木马、可折叠组件和其他组件，其中有js的需
浏览 1提问于2017-12-28得票数 10
回答已采纳
1回答
我正试图将物化添加到这个中，它是sage，删除了引导带，加上了手写笔和丢失网格。该链接是回购没有物化，我试图添加物化。 "materialize": "^0.97.7" "overrides": { "main/css/ma
浏览 5提问于2016-08-01得票数 0
回答已采纳
在Rails version6中添加物化-sass jquery函数时出错require("turbolinks").start()require("channels")
//= require materialize
$(documen
浏览 2提问于2020-05-11得票数 0
我正在尝试创建一个100%宽的网格布局与物化css。但是，当.row类不在.container类中时，它没有负边距。这使得嵌套非常难看，因为它为每个子.col创建了新的填充。在Materialize CSS中是否有Bootstrap的.container-fluid的等价物？
我看过一个关于这个问题的回复帖子，但它实际上并没有回答一个简单的嵌套cols布局中的问题。
浏览 0提问于2017-05-13得票数 2
我正尝试在我的模板文件order.html中使用Materialize css创建一个选择下拉列表。进行以下调用我还导入了以下库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js&q
浏览 0提问于2016-03-15得票数 0
我是在main.js中导入的import 'materialize-css/dist/css/materialize.css'File.vue
<
浏览 0提问于2019-02-14得票数 1
我正在尝试使用MaterializeCSS创建一个网格，并且应该将每个col放在row的中心，但现在cols都从row的左侧开始。我在row中添加了一个display:flex，但它实际上破坏了响应性，这意味着如果我挤压浏览器的宽度，我观察不到row & col的响应性。<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materi
浏览 0提问于2020-05-13得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
