Question

我使用bootstrap模式，我希望在模态体内有一个带有这种结构的按钮的列表：

    IMAGE            IMAGE        IMAGE       IMAGE
  All Options       Option1     Option2     Other Option

   IMAGE            IMAGE        IMAGE       IMAGE
   Option3         Option4      Option5       ...

   IMAGE            
   Option7

因此按钮和所有列表项之间的相同边距垂直对齐并且与滚动对齐，因为按钮可以占据比默认模态高度更高的高度。

你知道如何实现这个目标吗？我这样做：http://jsfiddle.net/znhgdzL7/，但它不起作用。

Answer 1

我在CSS中添加了最大高度和溢出。这会解决你的问题吗？它可能不是您想要的值，但您可以相应地调整它们。要使内容保持在水平最大值，您需要将wrap属性添加到CSS中。看到新的小提琴。

  display: flex;
  flex-wrap:wrap;
  max-height:50px;
  overflow-y:auto;

新小提琴：http://jsfiddle.net/djwave28/znhgdzL7/7/

Answer 2

请检查：http://jsfiddle.net/znhgdzL7/10/

模态现在可以处理许多选项。

这是css：

img{
  width: 30px;
  height: 30px;
  margin-bottom: 20px;
}
.row > div {
  margin-bottom: 20px;
  text-align: center;
}
.categories-list {
 max-height: 400px;
 overflow-y: auto;
}

我也更新了html，你可以在jsfiddle链接上查看它。

具有垂直居中对齐和滚动的项目的模态

2 个答案: