Question

我一直想知道是否有可能制作一排块，它们永远不会低于对方并调整行高，以便无论内容量多少（以及内容的数量），内部的文本始终保留在这些块的中间（和当真正需要时，调整块本身的高度）。我想让它看起来有点像下面的代码：

＆＃13;

ul
{
  padding: 0;
  margin: 0;
}

li
{
  float: left;
  list-style-type: none;
}

li a
{
  display: block;
  height: 60px;
  width: 60px;
  background-color: #009ec3;
  color: white;
  margin: 0 2px 2px 0;
  line-height: 60px;
  text-align: center;
}

li a:hover
{
  color: white;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul>
  <li>
    <a href="#">Item 1</a>
  </li>
  <li>
    <a href="#">Item 2</a>
  </li>
  <li>
    <a href="#">Item 3</a>
  </li>
  <li>
    <a href="#">Item 4</a>
  </li>
  <li>
    <a href="#">Item 5</a>
  </li>
  <li>
    <a href="#">Item 6</a>
  </li>
  <li>
    <a href="#">Item 7</a>
  </li>
  <li>
    <a href="#">Item 8</a>
  </li>
  <li>
    <a href="#">Item 9</a>
  </li>
  <li>
    <a href="#">Item 10</a>
  </li>
  <li>
    <a href="#">Item 11</a>
  </li>
  <li>
    <a href="#">Item 12</a>
  </li>
  <li>
    <a href="#">Item 13</a>
  </li>
</ul>

＆＃13;

我尝试过使用Bootstrap的.col-md-1课程，但是最多只有12个街区，我至少有13个或更多。是否有办法在Bootstrap中实现这一点，如果是这样，我将如何做到这一点？

JSFiddle

编辑：我试图将文本置于类别按钮的中心，并且最初使用flexbox属性的前一个样式表执行此操作（因为行高不胜任何工作）多行文字）。关于flexbox的问题是它与旧的浏览器版本不兼容，我想实现这一点，例如IE9也是如此。任何人都可以告诉我，如果有一种方法可以解决以下代码中使用的代码：JSFiddle？

Answer 1

您可以使用swiper js添加一个很好的交互。这些物品可以自由拖动。

Swiper.Js

DrawerArrowDrawable drawerArrow = new DrawerArrowDrawable(this);
drawerArrow.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(drawerArrow);

检查小提琴并拖动项目。

https://jsfiddle.net/afelixj/c0g1zLta/1/

Answer 2

可能使用百分比而不是像素。或者如果你想在bootstrap的网格系统中使用更多列，请转到http://getbootstrap.com/customize/ 并更改此@grid-columns:

类别内联块＆＃34;按钮＆＃34;在Bootstrap中

2 个答案: