Question

在列表元素（Bootstrap：＆lt; li＆gt;）中，我想在列中格式化一行。每行包括例如4个数据元素，每个都放在自己的列中。由于响应性要求，我不想使用表格。

这种方式（以相当静态的方式）如下所示。有一个更好的方法吗？为简洁起见，我将style元素放在HTML代码中。这种方式甚至会增加＆lt; li＆gt;的高度。元素，如果数据元素跨越2行（在小型设备上）。

<div class="row">
  <ul>
    <li class="list-group-item" style="height:3em">
      <span class="col-xs-6 col-sm-2">{{ useraccess.name }}</span>
      <span class="col-xs-6 col-sm-2">{{ useraccess.requestDate | date:'MM-dd' }}</span>
      <span class="col-xs-6 col-sm-4">{{ useraccess.requestAction }}</span>
      <span class="col-xs-6 col-sm-4">{{ useraccess.argument }}</span>
    </li>
        <li class="list-group-item" style="height:3em">
      <span class="col-xs-6 col-sm-2">{{ useraccess.name }}</span>
      <span class="col-xs-6 col-sm-2">{{ useraccess.requestDate | date:'MM-dd' }}</span>
      <span class="col-xs-6 col-sm-4">{{ useraccess.requestAction }}</span>
      <span class="col-xs-6 col-sm-4">{{ useraccess.argument }}</span>
    </li>
  </ul>
</div>

Answer 1

您可以在 .list-group-item 容器上使用display:flex并为其设置修复宽度，超过该容量不应增长为如果您希望高度根据要求动态增长，您可以设置 min-height 。

.row ul li{
list-style-type:none;
}

.list-group-item{
display:flex;
width:80%;
justify-content:space-between;
flex-direction:row;
flex-flow:row wrap;
min-height:3em;
}

.items{

}

<div class="row">
  <ul class="list">
    <li class="list-group-item">
      <span class="items">Name1</span>
      <span class="items">Date1</span>
      <span class="items">Action1</span>
      <span class="items">Arg1</span>
    </li>
        <li class="list-group-item">
      <span class="items">Name2</span>
      <span class="items">Date2</span>
      <span class="items">Action2</span>
      <span class="items">Arg2</span>
    </li>
  </ul>
</div>

Bootstrap响应式网格

div{
width:100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>
  <ul>
    <li class="list-group-item row" >
      <span class="col-xs-6 col-sm-2">Name</span>
      <span class="col-xs-6 col-sm-2">Date</span>
      <span class="col-xs-6 col-sm-4">Action</span>
      <span class="col-xs-6 col-sm-4">Arg</span>
    </li>
        <li class="list-group-item row">
      <span class="col-xs-6 col-sm-2">Name</span>
      <span class="col-xs-6 col-sm-2">Date</span>
      <span class="col-xs-6 col-sm-4">Action</span>
      <span class="col-xs-6 col-sm-4">Arg</span>
    </li>
  </ul>
</div>

Bootstrap - in <li> - 格式化响应的列

1 个答案: