我正在创建一个表单，其中有一个侧边导航栏。我要显示大约15-20个元素。我希望每行能够放置两个<li>。每个<li>都包含指向模态框的链接。当点击一个<li>时，会打开一个模态框。
以下是我的代码：
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<h4 class="sidebar-brand">Select Field Type</h4>
<li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li>
<li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li>
<li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li>
<li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Line</a></li>
<li><a href="#" data-toggle="modal" data-target="#Email_Modal">Email</a></li>
<li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Number</a></li>
<li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Number</a></li>
<li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li>
<li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li>
<li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li>
<li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li>
<li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li>
<li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li>
<li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li>
<li><a href="#" data-toggle="modal" data-target="#AutoNumber_Modal">Auto Number</a></li>
</div>
现在的样子是这样的:
Single Line
Pick List
Multi Select
Multi Line
Email
Phone Number
Mobile Number
Date
Time
Date-Time
Checkbox
Radio
Decimal
Number
Auto Number
但是，我希望它看起来像这样：
| Single Line | Pick List |
| Multiple Select | Email |
| Phone Number | Mobile Number |
| Date | Time |
| Checkbox | Radio |
| Decimal | Number |
| Auto Number | (further li) |
这是我的CSS代码：
#sidebar-wrapper {
z-index: 1000;
position: fixed;
display: table-cell;
left: 250px;
width: 0;
height: 600px;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
display: inline-block;
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
还有什么我应该做，以便我能够以我想要的方式获得它？
我想要这样做，因为一旦<li>内容的数量增加，它就会向下移动并变得不可见。最后一个选项变得不可见或部分可见。为了以我想要的方式实现它，我应该添加或删除什么？