Question

我是bootstrap的新手，我试图创建以下布局但没有成功。

<div class="container-fluid">
    <!-- Logo row -->
    <div class="row">
        <div class="col-sm-12">
            <div class="header">
                <img id="logoImage" src="#" height="67px">
            </div>
        </div>
    </div>

    <!-- QRCODE row-->
    <div class="row gradient qrCodeRow ">
        <div class="row" style="height: 100px;"></div>
        <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="qrCode"><img src="#" height="300px" width="300px"></div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="text qrText ">
                <p class="bigText"><strong>text</strong> text</p>
                <p>text</p>
                <p>text</p>
            </div>
        </div>
    </div>
</div>

和css：

.container-fluid {
        padding: 0;
        margin: 0;
    }

    .v-center {
        position: relative;
        transform: translateY(50%);
    }

    .gradient {
        background: #1a5062; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(#1a5062, #0d2933); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#1a5062, #0d2933); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#1a5062, #0d2933); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#1a5062, #0d2933); /* Standard syntax */
    }

    .text {
        color: #ffffff;
        font-family: sans-serif;
    }

    /* header */
    .header {
        height: 121px;
        padding: 0px 36px 0px 36px;
        display: flex;
        align-items: center;
    }

    /* qrcode */
    .qrCodeRow {
        min-height:502px;
    }

    .qrCode {
        float: right;
    }

    .qrCode img {
        height: 300px;
        width: 300px;;
    }

    .qrText {
        height: 300px;
        padding-left: 45px;
        font-size: 24pt;
        font-family: "DIN Neuzeit Grotesk Std Light";
    }

我无法弄清楚如何让中间部分始终保持1200px直到它必须调整大小。我甚至没有开始考虑如何让M1在M2之上。

Answer 1

我相信这就是你要找的东西。首先，我创建了一个空和全宽的标头。接下来，我用容器（1200px）创建了主元素。容器有一个负边距顶部可以拉起它。在这个容器里面你可以找到2列。添加col-xs-12将使xs-devices（超小型设备eq手机）上的列100％宽度，而col-md-4将使此列仅在中型设备（桌面）上的容器的第4个宽度上添加这些2个类以及列的一些偏移使其响应。您可以在下面看到在此bootply中创建的代码：http://www.bootply.com/04pBMcDCSu

<div class="wrapper" style="background-color: red;">
  <header style="height: 300px; background-color: white;">
  </header>
  <main>
    <!-- (1) -->
    <div class="container" style="margin-top: -100px; background-color: yellow;">
      <div class="row">
        <div class="col-xs-12 col-md-4 col-md-offset-1" style="background-color: blue; height: 300px;">
          <h1>M1</h2>
        </div>
        <div class="col-xs-12 col-md-4 col-md-offset-2" style="background-color: green; height: 300px;">
          <h1>M2</h2>
        </div>
      </div>
    </div>
    <!-- (2) -->
  </main>
</div>

Bootstrap Layout中心容器

1 个答案: