代码之家 › 专栏 › 技术社区 › Nate Pet

网格自动对齐为多行

twitter-bootstrap-3

Nate Pet · 技术社区 · 5 年前

我希望可以指定一行,但如果需要,程序会自动将结果拆分为多行。我需要这样做,因为我正在填充动态的DIV内容,所以它需要相应地对齐。我正在使用引导程序3。

    <div class="row">
     <div class="col-md-4">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
      <div>six</div>
      <div>seven</div>
     </div>
   </div>

最终结果将是:第一行“一”、“二”、“三”。第二排是“四”、“五”、“六”。第三排七英寸。

基本上,我要寻找的是引导程序自动与每行最多的div对齐的方法。

1 回复 | 直到 5 年前

jdickel 5 年前

如果我正确理解了所有的事情,你使用引导程序的方式就不正确。

每个引导程序 row 有12列。这些列可以分组。现在您可以为每个设备对这些列进行分组。 Read more on the bootstrap 3 documentation . 例如:

<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">
    one
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    two
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    three
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    four
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    five
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    six
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    seven
  </div>
 </div>

此代码根据列的大小对齐每个数字文本(一、二、三…)。- XX -Y.中等 md 大小,有3列。关于小 sm 尺寸有两列等。这是基于12列(总计) 被分割的 按您在 col-XX-Y 班级。

只要记住:

xx表示屏幕宽度,y表示希望在此屏幕宽度分组。

推荐文章

Glyn · 如何使用jQuery更改动态创建的按钮<span>中的文本?

2 年前

Salman Abbas · 如何在导航栏切换中更改下拉菜单中链接的颜色

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Knownow · 通过导航显示背景

6 年前

Mona Coder · 删除Bootstrap 3上下拉菜单和下拉菜单之间的边框

6 年前

user9727963 · 引导和Internet Explorer 11问题

6 年前

Queen of the North · 无法更改输入表单宽度

6 年前

jaggs · 如何将java中创建的href链接传递到jsp页面

6 年前

Abu Ayyub · 引导中具有一个边框的多个输入元素

6 年前

espresso_coffee · 所选内容在我的引导/JQuery应用程序中不起作用?

6 年前