标签: grid-system

我希望1个更大的图像和2个2x2格式的4个小图像,如下所示:

我最初的想法是将所有东西都放在一排.然后创建两列,并在第二列中创建两行和两列以创建1x1和2x2效果.

但是,这似乎不可能,或者我只是没有正确地做到这一点？

我正在玩Material-UI.是否有任何创建网格布局的选项(如在Bootstrap中)？

如果没有,添加此功能的方法是什么？

有一个GridList组件,但我想它有一些不同的目的.

这个标题可能不是很准确,但情况如下:

正如您在HTML中看到的那样,网格系统从xl屏幕上的4个图像到 lg屏幕上的3 个图像到2个更少的图像.

我试图让它正确显示 - 每个屏幕尺寸的适当数量的图像,即.然而,一些时髦的东西正在发生,并且无法使用bootstraps类来解决它.

在我看来,我必须在每个断点处动态添加行.

有什么建议？

- 更新 - 刚刚意识到col-xl-*不存在.但是,这根本不会改变这种情况.请忽略xl声明.

- 更新2 - 更新的图像.

- 更新3 - 我会尽力澄清我的目标.对于我帖子中附带的特定图像,我希望每行显示3个框 - 不是所有的helter skelter.

当它每行折叠到2个盒子(xs设备)时,我想确保每行有2个盒子.

我正在使用SASS的SCSS语法创建一个动态网格系统,但我遇到了麻烦.

我试图使网格系统完全动态,如下所示:

$columns: 12;

然后我创建这样的列:

@mixin col-x {
  @for $i from 1 through $columns {
  .col-#{$i} { width: $column-size * $i; }
  }
}

哪个输出:

.col-1 {
    width: 4.16667%;
  }

.col-2 {
    width: 8.33333%;
}
etc...

这很好但我接下来要做的是动态生成一个由逗号分隔的列类的长列表,基于所选的$列数 - 例如我希望它看起来像这样:

.col-1,
.col-2,
.col-3,
.col-4,
 etc... {
float: left;
}

我累了这个:

@mixin col-x-list {
  @for $i from 1 through $columns - 1 {
  .col-#{$i}-m { float: left; }
  }
}

但输出是这样的:

.col-1 {
  float: left;
}
.col-2 {
  float: left;
} …

这是一个简单的例子:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">DUMMY CONTENT</div>
    </div>
</div>

小提琴演示

当我在浏览器中看到结果时,我得到一个水平滚动条.

为什么会这样？

我究竟做错了什么？

我正在使用基础3来构建一个响应式网站,但我想让页脚和导航背景宽度占据整个宽度？我把我的行命名为

class="row navigation"
class="row footer"

我试图寻找如何解决这个问题,但我没有选择.我假设它是foundation.css文件中的一个小修复程序,但由于我是新手,它现在有点过于庞大.

任何poiinters非常感谢.

我正在尝试使用bootstrap创建一个站点而没有外部css.看来我可以使用嵌套网格系统实现许多格式化目标.

前

<div class="container-fluid bs-docs-grid">
    <div class="row show-grid">
        <div class="col-md-6">
            <div class="row show-grid">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </div>
        <div class="col-md-6">
        </div>
    </div>
</div>

这是一种合理的做法吗？

新的Bootstrap 3网格系统非常棒.它在所有屏幕尺寸的响应式设计中功能更强大,嵌套更容易.

但我有一个我无法弄清楚的问题.如何在列之间添加精确的间隙？假设我有容器960px,310px的3列和3列之间的15px的2个gutters.我怎么做？

我已经开始使用Bootstrap 3迁移到网格系统,但文档中的示例都使用DIV:http: //getbootstrap.com/css/#grid

我做了一个有点多余的代码,将DIV类与TABLE标签/类混合:http: //getbootstrap.com/css/#tables

问题是布局使边界变得困难,我认为应该是更好的方法.对此有何建议？

小提琴中的示例代码:http://jsfiddle.net/7g8nV/1/

<div class="table-responsive">
  <table class="table table-bordered"> 
  <tr class="row">
    <td class="field-label col-md-3 active">
      <label>Field 1:</label>
    </td>
    <td class="col-md-9">
      Value 1
    </td>
  </tr>
  <tr class="row">
    <td class="field-label col-md-3 active">
      <label>Field 2:</label>
    </td>
    <td class="col-md-9">
      Value 2
    </td>
  </tr>
  <tr class="row">
    <td class="field-label col-md-3 active">
      <label>Field 3:</label>
    </td>
    <td class="col-md-9">
      Value 3
    </td>
  </tr>
</table>
</div>

提前致谢.

目前我的"flex"项目看起来像这样(垂直对齐:顶部)......

 _____________________________________
   1

 _____________________________________
   2

 _____________________________________
   3

 _____________________________________
   4

 _____________________________________

我的目标是使它们看起来像这样(垂直对齐:中间)......

 _____________________________________

   1
 _____________________________________

   2
 _____________________________________

   3
 _____________________________________

   4
 _____________________________________

我的要求:

• 柔性容器必须保持100%的高度
• 弹性项目必须保持25%的高度(相当于100%,无论如何这是默认值).
• 弹性项目必须垂直居中.
• 这必须具有响应性并且足够智能以保持在每个设备的中间(因此没有行高/填充)

http://jsfiddle.net/oneeezy/p4XtA/

HTML

<!-- Flex Box -->
<section>

    <!-- Flex Items -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

</section>

CSS

/* Flex Box */
section { padding: 1em; background: black; display: flex; flex-flow: column; height: 100%; justify-content: space-around; }

/* Flex Items */
div { border-top: 1px solid #ccc; background: #f2f2f2; height: 25%; }
div:first-child { border-top: 1px …