标签: grid-system

有一行有四col-sm-3列.我需要在这一行的中心放置一些文本,这意味着文本需要跨越第二列和第三列.

这是我的Bootply

这是一些代码:

<div class="row">
  <div class="col-md-3" style="background-color:yellow">123</div>
  <div class="col-md-3" style="background-color:green">456</div>
  <div class="col-md-3" style="background-color:red">789</div>
  <div class="col-md-3" style="background-color:grey">000</div>
</div>

另外:为了澄清,我需要将文本重叠在同一行.

点击查看原图

我想使屏幕像所附的图像一样，但是出现一些问题。我的代码在小型设备和大型设备上都可以正常运行，但在中型设备上则不能正常运行。因此，任何人都可以调查我的代码并帮助我解决此问题。实际上，我对Flex布局网格系统不感到困惑。在Bootstrap中实现此目标非常容易，但我希望在Flex Layout中实现相同的目标。

    <div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign.lg="start center"
     fxLayoutAlign.xs="center center" fxLayoutAlign.sm="center center">

  <div fxFlex="25%" fxFlex.md="50%" fxFlex.sm="100%" fxFlex.xs="100%" fxLayout.md="row"
       class="pading_card">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content> …

我正在尝试使用 Vuetify 创建一个背景，它既有侧边栏又有导航栏。它应该看起来像这样：

目前我已经使用 v-navigation-drawer 创建了侧边栏，但是我无法让导航栏到达正确的位置。如何将导航栏添加到以下代码中，使其看起来如上图所示？

<template>
<div id="app">
    <v-app id="inspire">
        <v-navigation-drawer
            color="#09151E"
            permanent
            expand-on-hover
        >
            <v-divider></v-divider>
            <v-list nav dense>
                <v-list-item link href="#">
                    <v-list-item-icon>
                        <v-icon color="white" small>mdi-lightbulb</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title class="title">Blue</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-card>Navbar</v-card>
    </v-app>
</div>

我知道下面写 v-card 不应该这样写，但是使用 v-row 和 v-col 会使页面的角落出现空白，看起来不太好

所以我正在尝试为我的响应式设计设置一个网格系统,以便在桌面计算机上我有一个左侧的主列用于内容和右侧栏.我希望侧边栏可以覆盖100%的屏幕,如果它在移动设备上的话.我在这里使用bootstrap站点上的示例show:http://examples.getbootstrap.com/grid/ 位于页面底部 - 或者如下所示......

  <div class="row">
    <div class="col-12 col-sm-8 col-lg-8">main content</div>
    <div class="col-6 col-sm-4 col-lg-4">right side bar</div>
  </div>

主内容列跨越100%,但右侧栏列不跨越.它跨越80%的屏幕(我认为).如果它在移动网站上,我希望它能100%做,因为没有任何意义可以保持它更小,并且在它的右边有空白区域.