layui栅格布局设置列间距不起作用

  layui栅格布局支持设置列间距,只需使用预置类layui-col-space*即可。不过实际使用时却始终看不到效果。
  根据layui官网文档的说明,只需要在行所在div元素的class属性中增加layui-col-space*即可出现列间距。如下图所示:

layui栅格布局设置列间距不起作用_第1张图片
  但是实际使用时,一般会在行所在div元素中设置行背景色,此时设置列间距就看不出效果。html示例如下所示(示例代码取自参考文献1),将背景样式放在行所在div元素或者每列所在div元素的效果一样,都看不出间距。

<div class="layui-container">             
    <div class="layui-row layui-col-space10" style="background-color: red;">
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" >
        移动:6/12 | 平板:6/12 | 桌面:4/12
      div>
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        移动:6/12 | 平板:6/12 | 桌面:4/12
      div>
      <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
        移动:4/12 | 平板:12/12 | 桌面:4/12
      div>
      <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
        移动:4/12 | 平板:7/12 | 桌面:8/12
      div>
      <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
        移动:4/12 | 平板:5/12 | 桌面:4/12
      div>
    div>
div>

在这里插入图片描述

  百度出来的文章(参考文献2-3)给出的解释是layui的间距样式设置采用的是padding(向内缩)在行div或列div上设置背景色会使整行或当前行的列区域全部显示背景色,向内缩的话不会有什么区别。正确的方式是将列内容再用div包一层,同时设置该层div的背景色,这样就能看出列间距效果。如下所示:

<div class="layui-container">    
   <div class="layui-row layui-col-space10">
     <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" >
       <div  style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12div>
     div>
     <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
       <div  style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12div>
     div>
     <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
       <div  style="background-color: red;">移动:4/12 | 平板:12/12 | 桌面:4/12div>
     div>
     <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
       <div  style="background-color: red;">移动:4/12 | 平板:7/12 | 桌面:8/12div>
     div>
     <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
       <div  style="background-color: red;">移动:4/12 | 平板:5/12 | 桌面:4/12div>
     div>
   div>
 div>

在这里插入图片描述
  同时在行、列、内容上设置背景色时的效果如下所示:

<div class="layui-container">             
    <div class="layui-row layui-col-space10" style="background-color: rgb(49, 214, 99);">
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"  style="background-color: rgb(47, 15, 207);">
        <div  style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12div>
      div>
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        <div  style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12div>
      div>
      <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
        <div  style="background-color: red;">移动:4/12 | 平板:12/12 | 桌面:4/12div>
      div>
      <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
        <div  style="background-color: red;">移动:4/12 | 平板:7/12 | 桌面:8/12div>
      div>
      <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
        <div  style="background-color: red;">移动:4/12 | 平板:5/12 | 桌面:4/12div>
      div>
    div>
  div>

在这里插入图片描述

参考文献:
[1]https://www.layui1.com/doc/index.html
[2]https://blog.csdn.net/qq_40943363/article/details/118052587
[3]https://www.jb51.net/article/264158.htm

你可能感兴趣的:(网页编程,layui,栅格,列间距)