Question

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

我该怎么做？

＆＃13;

.container {
  width: 75%;
}

＆＃13;

<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>

＆＃13;

Answer 1

对您的特殊情况进行分类，以便我们可以针对具有正确特异性的项目

注意 .clearfix，它会将花车放回到应该完成的位置。

.container {
  width: 75%;
}

.left-side,
.right-side {
  margin: 0;
  float: left;
  width: 50%;
}

.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;
}

<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>

Answer 2

为什么不float a代码？

将float:left和width:50%添加到您的.list-group-item CSS：

.list-group-item {
 position: relative;
 display: block;
 padding: 10px 15px;
 margin-bottom: -1px;
 background-color: #fff;
 border: 1px solid #ddd;
 width: 50%;
 float: left }

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

2 个答案: