代码之家  ›  专栏  ›  技术社区  ›  kjdion84

引导4工具提示未居中

  •  -1
  • kjdion84  · 技术社区  · 8 年前

    我的工具提示得到了奇怪的结果。它们没有正确居中。

    请看这把小提琴: https://jsfiddle.net/uf0epmxm/6/

    我完全不知道为什么会这样。我把它复制在小提琴上。当您将鼠标悬停在“添加角色”按钮上时,可以看到它没有居中:

    <button type="button" class="btn btn-primary" data-modal="http://laraback.dev/roles/add" data-toggle="tooltip" title="Add">Add Role</button>
    

    我注意到的一件事是,如果我完全移除顶部的蓝色导航栏,它会正确居中。

    谢谢你的帮助。

    2 回复  |  直到 8 年前
        1
  •  1
  •   kjdion84    8 年前

    我通过在侧栏上使用flex:0 0 250px,在content div上使用flex:0 0 auto来解决这个问题,而不是使用最小和最大宽度。

        2
  •  0
  •   Uncle Iroh    8 年前

    你试过这样移动按钮吗?

    <div class="col">
        <button type="button" class="btn btn-primary" data-modal="http://laraback.dev/roles/add" data-toggle="tooltip" title="Add">Add Role</button>          
    </div>
    <div class="col text-right">
        <h1 class="display-5">Roles</h1>      
    </div>
    

    我认为这可能是由容器的大小引起的。

    可以在属性中使用如下数据放置:

    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Add">Add Role</button>
    

    只需更改工具提示位置。