如何使用bootstrap仪表板

Question

所以我将此示例用作指南http://getbootstrap.com/examples/dashboard/ 但现在我想修改侧边栏，这样我就可以在一行中获得2个链接。我尝试过这样的事情：

我正在使用AngularJS来显示<li>处于活动状态

<li ng-class="{ active: isActive('/content1')}" > 
    <a href="#/content1">Content1  </a> <a class="btn btn-primary" href="#/content1/addsomestuff">+</a>
</li>

但这确实显示在侧边栏中的2行而不是1。

是否也可以将第一部分放在80％的空间而第二部分放在侧边栏内的20％？ 这就是我认为应该在<li>元素

中查看的内容

Answer 1

您可以应用以下CSS来实现 -

＆＃13;

＆＃13;

li a{
        float:left;
        display: block;
    }

    li a:first-child{
        width: 79%;
    }

    li a:last-child{
        width: 19%;
        margin-left: 2%;
    }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<li class="clearfix" ng-class="{ active: isActive('/content1')}" > <a href="#/content1" class="btn btn-warning">Content1  </a> <a class="btn btn-primary" href="#/content1/addsomestuff">+</a>  </li>

＆＃13;

＆＃13;

＆＃13;

我使用btn-warning类来向你展示它的两个元素都是你想要的宽度。而不是在li a上应用css而是给li一个类并应用css。同样在clearfix中使用bootstrap li类，因为a都是浮点元素