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

如何使用Bootstrap 3使按钮保持在右侧顶部屏幕上,并保持移动响应?

  •  0
  • SilvarCraw  · 技术社区  · 8 年前

    我做了一个自定义按钮,并希望使用它作为导航栏切换,使按钮始终停留在屏幕的右上方,并具有移动响应能力,我发现的所有解决方案使按钮位置:固定。但这不是移动响应,我尝试了右拉类,但它只有当我在屏幕顶部,而不是固定的工作。只要我将固定的位置应用到屏幕的左侧,如果我希望它具有移动响应性,则使用left或right将不起作用。无论如何要解决这个问题?

    5 回复  |  直到 8 年前
        1
  •  0
  •   Marc Hjorth    8 年前

    正如其他人所说:

    top: 0;
    right: 0;
    

    ..应该很好。同时,连接小提琴也是一个好主意。如果您想让它保持移动响应,只需将其包含在引导网格中。

    做了这个 fiddle

        2
  •  0
  •   Mr. Go    8 年前

    尝试应用以下css

    .customButton{
        top : 0;
        right : 0;
        position: fixed;
     }
    
        3
  •  0
  •   SilvarCraw    8 年前

    试着失败,然后解决它。 只需用div元素或其他元素将其包裹起来,然后向右应用div浮点和一些小填充,我就得到了我的按钮集。

    <div style='float:right;'>
       <button style='position:fixed;'></button>
    </div>
    
        4
  •  0
  •   Dumisani    8 年前

    <input type="button" style="position:fixed; top:0px; right:0px;" />
    
        5
  •  0
  •   Ecaterina Moraru    8 年前

    对于导航栏,如果您希望固定导航栏,引导提供特殊类。使用来自的“.navbar fixed top” https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top

    浮动可以用你说的“.pull right”或“.navbar left”来完成。此外,你还需要注意你在“塌陷”区域放置了什么。

    https://getbootstrap.com/docs/3.3/css/#responsive-utilities