将插入符号定位在 Bootstrap 下拉按钮中

Posted 2023-03-06

【中文标题】将插入符号定位在 Bootstrap 下拉按钮中

【英文标题】：Position the caret in Bootstrap dropdown button

【发布时间】：2017-04-22 19:29:43

【问题描述】：

我想修改 Bootstrap 下拉按钮，以便在填充后将插入符号从按钮宽度的计算中移出。换句话说，我想通过在每一侧提供相等的填充来使按钮中的文本“居中”，但下拉插入符号仍然在右侧。

我尝试了几件事，包括在按钮上使用相对定位（根本不起作用）和绝对定位（部分起作用但失去垂直定位/居中）。

此外，还有几件事让这变得更棘手：

有些下拉菜单没有文字，只有一个图标 使用 Font Awesome 添加图标（使用 :before 元素/选择器）

示例 HTML：

<div class="btn-group"
    <button type="button" class="btn btn-default dropdown-toggle fa fa-download">
        <span class="caret"></span>
    </button>
    <button type="button" class="btn btn-default fa fa-envelope"></button>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle">
        More <span class="caret"></span>
    </button>
</div>

正如您在“正确”示例中所见，插入符号不再影响按钮的宽度（而是在“内部”按钮的填充，如粉红色线条所示）。有谁知道这怎么可能？谢谢！

更新：

感谢@Dekel 的回答（稍作调整以适应我的需要并适用于两种类型[只有图标的和有文本的]）：

/* I also removed the space in the html before the caret, which is where "top" comes in */
.btn.fa .caret 
    left: 5px;
    position: absolute;
    top: calc(50% - 1px);

.btn .caret 
    position: absolute;
    top: calc(50% - 1px);
    right: -12px;

Codepen Example

【问题讨论】：

你能举个例子吗？ (jsfiddle/sn-p/codepen)

@Dekel 谢谢，我忘了把它添加到原始消息中。

【参考方案1】：

我几乎可以肯定这就是您要找的东西：

.btn .caret 
    position: absolute;
    top: calc(50% - 1px);

请检查并告诉我。 第二个按钮块没有插入符号作为宽度计算的一部分。我在容器中添加了另一个类来设置这些特定值：http://codepen.io/anon/pen/aBGrWW

【讨论】：

现在这似乎对我有用，谢谢！我删除了在 HTML 中添加的空间，而是使用left: 来补偿（更干净）。 .btn.fa .caret left: 5px; position: absolute; top: calc(50% - 1px); .btn .caret right: -12px; position: absolute; top: calc(50% - 1px);

【参考方案2】：

如果您将position: absolute; 应用于插入符号，它将不再影响文本的位置。然后，您可以使用 right 和 top 属性将插入符号定位在您希望它在填充内显示的位置。

例子：

.btn .caret 
    position: absolute;
    right: 10px;
    top: 10px;

注意：确保按钮不是 position: static，以便插入符号锚定到按钮（即设为 position: relative;）。

【讨论】：

感谢您的回复。我认为top: calc(50% - 1px); 在个人方面比top: 10px; 更干净（并且响应更快），特别是如果我们将来更改按钮/行高/填充。