Question

我有一个简单的bootstrap应用程序，我没有列宽度的问题，但行大小让我烦恼。有没有办法改变行的高度？我尝试过使用

.row {
     height: 20px;
}

而且它太静了，我有不同高度的行，这只会让事情变得混乱。理想情况下，我喜欢一个表格，当你向它添加新行时，它会调整大小并且所有行都适合屏幕。但是，如果我在一个20行的大屏幕上显示，如果我在一个较小的屏幕上显示10行，我会很高兴。到目前为止，所有屏幕都显示相同的行数。

生成表格的剃刀代码：

                    foreach (var order in Model)
                    {
                        <div class="row order row-height item-row" id="orderid">
                            <div class="col-md-3 text-center order-text">
                                <p>@order.TimeOrdered</p>
                            </div>
                            <div class="col-md-3 text-center order-text">
                                <p>@order.Orderer</p>
                            </div>
                            <div class="col-md-3 text-center order-text">
                                <p>@order.Destination</p>
                            </div>
                            <div class="col-md-3 text-center order-text">
                                <p class="status">@order.Remarks1</p>
                            </div>
                            <hr />
                        </div>

                    }

提前感谢您的任何帮助/指导。

Answer 1

我建议你看看CSS3单位VH。理论上，您可以将TD填充调整为VH单位，因此行可以扩展到更好的屏幕。可能你需要一张带分页的桌子。 ListJS还可以。

以下是一个例子：https://codepen.io/trinzia/pen/BLRXZK

table { height:calc(100vh - 80px); }

tbody td { 
  padding:5.5vh 9px;
}

如果您还需要实际隐藏行（虽然我很难想象什么时候会好，请参阅http://codepen.io/giodif/pen/LjwFi。基于高度的媒体查询应该有所帮助。

Answer 2

我认为你可以采取一些不同的方法......

1）Flexbox

.fill-rows {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.fill-rows > .row  {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* set a min-max height on row contents */
.col-md-3 {
   min-height: 30px;
   max-height: 50px;
}

http://www.codeply.com/go/zP8vdOcdPX

<强> OR

2）vh单位 - 身高的10％

.fill-rows > .row  {
    height: 10vh;
}

http://www.codeply.com/go/Sx9jbiwc1R

还有基于高度的媒体查询来控制特定视口高度的元素样式。

你可以强制所有行显示在屏幕上吗？

2 个答案: