CSS右对齐的CSS对齐问题

Question

我在我的项目中使用bootstrap toggle，效果非常好，但是当我尝试将切换div对齐时，文本（左侧）和div不是对齐了。

我正在阅读有关此问题的内容，并发现clearfix课程可以在这里提供帮助，它确实解决了一些问题，但它仍然看起来不应该如此。

JSFiddle

<ul class="list-group" style="width:200px">
    <li class="list-group-item active">
         <h5 class="list-group-item-heading">
             <i class="fa fa-cogs"></i>
             Settings
         </h5>

    </li>
    <li class="list-group-item">
         <h5 class="list-group-item-text clearfix">
             Data source 
             <div class="toggle btn btn-primary" data-toggle="toggle" style="width: 0px; height: 0px;float: right;">
                 <input class="pull-right" type="checkbox" checked="" data-toggle="toggle">
                     <div class="toggle-group">
                         <label class="btn btn-primary toggle-on">On</label>
                         <label class="btn btn-default active toggle-off">Off</label>
                         <span class="toggle-handle btn btn-default"></span>
                     </div>
             </div> 
         </h5>
    </li>
</ul>

这就是我希望它的样子（请不要介意图标）：

Answer 1

你应该在＆＃34;数据源＆＃34;之外创建一个元素。并为其添加line-height: 32px;：

＆＃13;

＆＃13;

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" style="width:200px">
    <li class="list-group-item active">
         <h5 class="list-group-item-heading">
             <i class="fa fa-cogs"></i>
             Settings
         </h5>

    </li>
    <li class="list-group-item">
         <h5 class="list-group-item-text clearfix">
             <span style="line-height: 32px;">Data source</span> 
             <div class="toggle btn btn-primary" data-toggle="toggle" style="width: 0px; height: 0px;float: right;">
                 <input class="pull-right" type="checkbox" checked="" data-toggle="toggle">
                     <div class="toggle-group">
                         <label class="btn btn-primary toggle-on">On</label>
                         <label class="btn btn-default active toggle-off">Off</label>
                         <span class="toggle-handle btn btn-default"></span>
                     </div>
             </div> 
         </h5>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;