将 bootstrap list-group-item 拆分为两列

Question

如果我有一个 Bootstrap 3 元素列表组<a>。我希望其中一个分成两半，以便在组内它看起来类似于片段中所示的按钮组。

我怎样才能做到这一点？

.container {
  width: 75%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="list-group">
    <a href="#" class="list-group-item left-side">Left Side</a>
    <a href="#" class="list-group-item right-side">Right Side</a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
  </div>
  
  <p>How to divide list-group-items .left-side and .right-side so they appear on the same line but seperated similar to this:

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <a type="button" class="btn btn-default">Left Side</a>
  <a type="button" class="btn btn-default">Right Side</a>
</div>
   
</div>

Answer 1

对您的特殊情况进行分类，以便我们能够以正确的特异性来定位项目

请注意.clearfix，一旦完成，它将把浮标放回原来的位置。

.container {
  width: 75%;
}

.list-group-item.left-side,
.list-group-item.right-side {
  margin: 0 0 -1px;
  float: left;
  width: 50%;
  border-bottom-width:0px;
}

.split-items .list-group-item.left-side{
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
}

.split-items .list-group-item.right-side{
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
  border-top-right-radius:4px;
  border-left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<br>
<div class="container">
  <div class="list-group">
    <div class="clearfix split-items">
      <a href="#" class="list-group-item left-side">Left Side</a>
      <a href="#" class="list-group-item right-side ">Right Side</a>
    </div>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
  </div>
</div>