javascript - Bootstrap - 创建 100 列网格,与圆形结合

标签 javascript css twitter-bootstrap twitter-bootstrap-3 grid-layout

我有一个圆形的容器。我想创建一个包含 100 列的网格。我想要一个函数来创建具有与圆形形状相结合的形状的网格。

到目前为止,我已经创建了一个方形网格(10x10)

for (var i=0; i<10; i++) {
  var $row = $('<div class="row"></div>');
  for (var j=0; j<10; j++) {
    $row.append('<div class="col-xs-1 ' + (j==0 ? "col-xs-offset-1" : "") + ' grid_cell"><span class="glyphicon glyphicon-user"></span></div>');
    }
  $("#grid_1").append($row);
};

参见 fiddle :https://jsfiddle.net/vo1npqdx/884/

是否有数学定理可以帮助解决这个问题?

-------------------------------------------------------- - - - - - - - - - -编辑 - - - - - - - - - - - - - - - --------------------------------

我设法手动放置单元格(使用开关盒)。有什么办法改善一下吗?

https://jsfiddle.net/vo1npqdx/886/

enter image description here

最佳答案

我尝试使用 display:flex 属性。我没有创建 10x10。我的方法是完全动态的。请检查这个 fiddle 。 https://jsfiddle.net/nc3uLy6L/

关于javascript - Bootstrap - 创建 100 列网格,与圆形结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44243277/

相关文章:

javascript - WebRTC大规模广播

javascript - 当源文件中有多个图像时,如何从源文件中选择特定图像?

html - Angularjs 重复不显示空间

javascript - 如何让这些按钮向右浮动并垂直对齐一些垂直间距

javascript - 升级我的 PHP 聊天系统? (让它只更新新消息?)

javascript - 覆盖 jQuery 的 .load 函数

javascript - 更改属性时选择 child 的 child

javascript - 如何在不使用 <form> 的情况下将 action = "/#"添加到按钮?

css - Bootstrap 3 : Setting custom container sizes based on page

Javascript 使用数字编码?