使用vue-material框架创建网格布局有困难

Question

我正在尝试使用vue-material框架创建一个四行布局，每行包含两列。

布局应具有响应性

当视口大小等于或小于600px时，列应该堆叠在一起。

​

​

这些列应该具有如下所示的常规布局：

未堆叠时的图像。

​

​

当我减小屏幕尺寸时，此内容不会堆叠。

Code using vue material

这是代码| HTML

<div id="app">

  <div class="edit">

    <h1 class="md-display-3">Connect to be more</h1>
    <h2 class="md-subhead">Always be aware of the state of your business </h2>

  </div>

  <div id="canvas">

    <md-layout md-row md-columns id="rightColumn">

      <md-layout md-column>
        <h1 class="" id="entitle">Connect soft documents</h1>
      </md-layout>

        <md-layout md-column>
        <h1 class="" id="entitle">Connect soft documents</h1>
      </md-layout>


    </md-layout>

  </div>



</div>

这是代码| CSS

.edit {
  text-align: center;
    font-family: Heiti SC;
}

    #entitle {

    line-height: 1.2em;
    }
.md-display-3 {

  font-family: Heiti SC;
}

/*  media queries  */


/*  tablet  */

@media screen and (max-width: 600px) {
  .md-column {
    float: none !important;
    margin: auto;
    text-align: center;
    width: 46%;
  }
}


#rightColumn {
  background-color: aqua;
  font-family: Heiti SC;
}

Answer 1

下面是你如何做到这一点。

​

Vue.use(VueMaterial)

Vue.config.productionTip = false

new Vue({
  el: '#app',
})

@import url('https://cdnjs.cloudflare.com/ajax/libs/vue-material/0.7.4/vue-material.css');


#container > .md-layout {
  background-color: white;
  min-height: 100px;
  border-color: black;
  align-items: center;
  justify-content: center;
  /*border-style: dotted;*/
  border-width: 1px;
  padding: 8px;
}

body {
  background: #eee;
}

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-material/0.7.4/vue-material.js"></script>


<div id="app">
  <md-layout id="container">
    
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
      1
    </md-layout>
    
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50" md-flex-large="50" md-flex-xlarge="50">
      2
    </md-layout>
    
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50" md-flex-large="50" md-flex-xlarge="50">
      3
    </md-layout>
    
    
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      4
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      5
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      6
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      7
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="66" md-flex-large="66" md-flex-xlarge="66">
      8
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">
      9
    </md-layout>
    
  </md-layout>
</div>

​