如果浏览器尺寸较小，则堆叠列

Question

我的页面上有 2 列...我的问题是，如果浏览器尺寸变小，我希望右列堆叠在左列下方。我正在使用 angular material 但不介意使用自定义样式来解决此问题。任何帮助将不胜感激。

HTML:

<div layout="row" layout-align="center center" flex>
    <section layout="row">
      <div id="nav" flex="20" layout="column" layout-align="space-around">
        <md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
      </div>
      <div id="content" flex>
        <h2>Right Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
      </div>
    </section>
  </div>

CSS:

.datepickerdemoBasicUsage md-content {
    padding-bottom: 200px; }

.datepickerdemoBasicUsage .validation-messages {
    font-size: 11px;
    color: darkred;
    margin: 10px 0 0 25px; }

.fixed-calendar {
  width: 340px;
  height: 340px;
  display: block;
}

.fixed-calendar .md-calendar-scroll-mask {
  width: 340px !important;
}

.fixed-calendar .md-virtual-repeat-scroller {
  width: 340px !important;
  height: 308px;
  overflow: hidden !important;
}

JSFiddle Demo

Answer 1

你的 parent layout="column" layout-gt-xs="row"

上有这样的东西

<div ng-app="sandbox">
  <div>
    <section layout="column" layout-gt-xs="row">
      <div id="nav" flex>
        <md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
      </div>
      <div id="content" flex>
        <h2>Right Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
      </div>
    </section>
  </div>
</div>

这表示将 child 个元素堆叠到一列中。然后如果浏览器宽度大于或等于 xs (>= 600px)，则将 child 个元素排成一行。

Fiddle

如果浏览器尺寸较小，则堆叠列

Stack columns if browser size is small

css

angularjs

angular-material

material-ui