Question

我正在努力创建一个L形div（使用L shaped div container中的掩码），并将其与响应式Bootstrap页面相结合。我想要创建的内容如下所示：

------------------------------------------------------------
|                                                           |
|                                                           |
-------------------------------------------------------------
--------------------------------------------------------------
| -----------------------------------   -------------------- |
| |                                 |   |                  | |
| |                                 |   |                  | |
| |                                 |   |                  | |
| |---------------------------------|   |                  | |
|  zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz      |                  | |
|  zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz      |                  | |
|  zzzzzzzzzzzzzzzzz zzzzzzzzzzz        |                  | |
|  zzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzz  |                  | |
|  zzzzzzzzzzzzzzz zzzzzzzzz zzzzzzzz   |------------------| |
|  zzzzzzzzzzz zzzzzzzzzz zzzzzzzzzzz zzzzzzzzzzzz zzzzzz zz |
|  zzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzz zzzzz   |
|  zzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzz zzzzzzzzzzz zzzz      |
|------------------------------------------------------------|

div的高度可变，我希望Bootstrap管理堆叠小型设备的div。如有必要，可以为小型设备隐藏右侧内部div。如果没有，我会把它放在Z内容下堆叠。

我可以将Bootstrap与例如

混合搭配

 .mask
    {
        border-style: solid;
        border-width: 0 0 3px 3px;
        position: relative;
        float: right;
        clear: none;
        right: -3px;
        top: -3px;
        background-color: white;
        width: 50%;
        height: 4em;
    }

Answer 1

您可以简单地使用浮动来实现您想要的布局。您将图像/ div插入包含div的右侧，并让文本在其周围流动，而不是“掩码”。

<header></header>
<article>
  <div class="image"></div>
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content
</article>

Client --> Server net.tcp://...

Server <-- Server net.tcp://...

Server --> Client net.tcp://...

Client <-- Server net.tcp://...

Answer 2

您只能使用.mask来设置块的高度。要设置宽度，请使用.col-*-*个类。使用Responsive utilities在视口断点之间切换内容。

.mask {
  height: 50px;
  background-color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="mask pull-right col-xs-3 hidden-xs"></div>
<div>
  zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz zzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzzzzzzzzzzzzz
</div>

如果您运行代码段，则会隐藏红色div。但是如果你进入全页模式，那么你会在右上角看到红色块。

使用面罩的L形div，结合响应式Bootstrap

2 个答案: