Question

所以，这是我的代码：http://jsfiddle.net/8xpL78ow/我有一些问题，我不确切知道如何解决：

a）我希望按钮与右侧对齐并始终保持一行（不要像“非常长的文件夹名称”示例中那样在其他按钮下折叠）。如果在float: right div上使用.btn-group，那没关系，但这是我的第二点：

b）我希望文字填充所有剩余的水平空间。

任何帮助将不胜感激。谢谢。

Answer 1

我会尝试这样的事情。

#folder-panel .btn-group {
    text-align: right;
    white-space: nowrap;
    padding-left: 5px;
}
#folder-panel .btn {
    float: none;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/xe208rxs/

由于您使用的是Bootstrap，因此您需要确保CSS规则具体到足以生效。

我在.container块中添加了ID，然后修改了.btn规则以设置float: none。这意味着按钮现在将是内联元素。

如果您不想使用和ID，那么您必须确保在Bootstrap中复制选择器以覆盖您需要更改的CSS规则。

将text-align: right设置为.btn-group，按钮将对齐到右侧。最后，设置white-space: nowrap，这将阻止图标包装。

注意：您可以尝试设置最小宽度值，但不太灵活。

Answer 2

尝试使用pull-right选项为您的按钮组，这样他们将向右浮动。如果需要，还可以使用网格部分来分隔按钮和文本内容。

 <div class="container">

    <div class="list-group folders-list">
        <a class="list-group-item active" href="#">
            Folder 1
        </a>
        <a class="list-group-item table" href="#">
            <div class="col-md-5">
                <span class="folder-name table-cell">Very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long folder name</span></div>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 3</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 4</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 5</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
    </div>

</div> <!-- /container -->

显示表/表格单元格 - 将一个单元格对齐到右侧

2 个答案: