css - Bootstrap panel-footer with button pull-right-6ren

css - Bootstrap panel-footer with button pull-right

转载作者：行者123 更新时间：2023-11-28 09:33:40

28

4

我有以下带有 Bootstrap 的 HTML 元素:

 <div class="panel-footer">
                            <button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
                        </div>

如果您看到有灰色区域(panel-footer):

按钮使用 pull-right 类也就是 float:right，但我想要灰色区域实际上是 panel-footer div 以适应按钮高度。

这是 panel-footer 的样式:

这是向右拉:

Any clue?

更新:

我在按钮后面加了:

<div class="clearfix"></div>

似乎解决了这个问题。可以吗？

最佳答案

原始答案(2017)

你可以试试这个(Bootstrap 3)

<div class="panel-footer text-right">
   <button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>

您只需将 text-right 类添加到您的面板页脚即可。

它对我有用。

更新 (2023-01-11)

Bootstrap 5

使用 text-end 类使按钮重新对齐到右侧。

.panel-footer {
  background: #e9e9e9;
  border-top: 0;
  padding: 10px 15px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>

<body class="p-4">
  <div class="panel-footer text-end">
    <button class="btn btn-primary">Primary button</button>
  </div>
</body>

</html>

Bootstrap 4 & 3

使用 class text-right 将向右对齐。

.panel-footer {
  background: #e9e9e9;
  border-top: 0;
  padding: 10px 15px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

<body class="p-4">
  <div class="panel-footer text-right">
    <button class="btn btn-primary">Primary button</button>
  </div>
</body>

</html>

关于css - Bootstrap panel-footer with button pull-right，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40697395/

28

4

0

文章推荐： swift - UILabel 文本颜色扩展

文章推荐： javascript - 嵌入表单在 IE 中不显示值

文章推荐： css - 更改 div 大小时网格不修改 - Bootstrap

文章推荐： jquery - 在手机中选择标签

panel - 如何在 Panel Pyviz 小部件中显示函数的文本输出？
这似乎是一个基本问题，但我已经尝试了一段时间并没有找到 Pyviz Panel 的解决方案: 我试图通过单击按钮来触发函数，捕捉函数的输出并将它们打印在屏幕上所需的位置。 with output ip
panel - Acumatica Smart Panel 打开时不显示数据
我正在尝试在销售订单屏幕上创建一个智能面板，它将显示与 SOLine 库存项目相关的项目。我在库存项目页面上添加了一个选项卡和网格，并使用 CFBSUPSale 的 DAC 创建了一个表来创建此关系
c# - Winform : Placing a panel over multiple panels
需要这个: 但是得到这个: 我需要自定义绘制矩形来执行上述操作吗？另外我需要在面板内显示一个数字。有什么想法可以解决这个问题吗？最佳答案不要将第三个面板(水平面板)放在其他面板之一内。一旦所有三个
extjs - 扩展 Ext.panel.Panel 的正确方法？
我正在使用 Ext JS 4.1.1 为网页创建 GUI。我尝试创建一个组件(下面的“GeneSearchComponent”)，我可以在更复杂的布局中使用它。但出于某种原因，我无法将“GeneSea
javascript - ExtJS Ext.panel.Panel 工具命令
我有这个面板。它按以下顺序显示工具图标:齿轮、关闭、折叠。我想得到的图标是这样的顺序:齿轮、折叠、关闭。我想不通。当我把 collapseFirst: true 放在第一位时，collapse 就在第
javascript - ExtJS 主题修改 Ext.panel.Panel
我正在使用 ExtJS 4.1.1a，我正在尝试为“tabbedPane”和带有“Accordion”布局的普通面板创建一个新主题。我无法更改每个标题的颜色。也就是说选项卡和选项卡的背景以及 Acco
wpf - Panel.Children 与 Panel.InternalChildren - 有什么区别？
根据MSDN - Panel.InternalChildren Property : Classes that are derived from Panel should use this prope
ExtJS - 如何将工具提示设置为 Ext.panel.Panel 中的 TAB
我有一个 Ext.Tab,Panel，我在其中动态创建了多个选项卡。每个选项卡都包含一个 Ext.panel.panel。我需要做的是在选项卡中添加工具提示。我试图做这样的事情: Ext.defin
javascript - Bootstrap : Using panel heading to collapse panel body
我有一个带有面板标题和面板主体的 Bootstrap v3 面板。我希望用户能够单击面板标题，它将折叠/展开面板主体。我正在使用 Bootstrap 的 Collapse javascript 来执行
javascript - 如何将两个 Ext.Panels 放在另一个 Ext.Panel 的左右两侧？
我正在尝试在 ExtJS 中创建一个布局，它在顶部和底部的左右部分都有一个网格，一个基本的父/子、主/详细布局: wrapper_panel panel_top [grid] panel_bott
javascript - 我怎样才能使 "ol.Map"适合 "Ext.panel.Panel"？
我正在使用 Extjs 6.0 开发网络 gis和 OpenLayers 3.6.0在 MVVM 架构中。我想把 ol.map到 Ext.panel.Panel .元素主视图如下: Ext.defin
python - Pandas scatter_matrix 模拟函数对(lower.panel，upper.panel)
我需要在 Python 中创建一个散布矩阵。我尝试使用 scatter_matrix 来实现此目的，但我只想保留对角线上方的散点图。我正处于真正的开始阶段(没有走得太远)，当列有名称(不是默认数字)
c# - Panel.Dock Fill 忽略其他 Panel.Dock 设置
如果您在表单上创建一个面板并将其设置为 Dock=Top，然后放下另一个面板并设置其 Dock=Fill，它可能会填满整个表单，而忽略第一个面板。更改 Tab 键顺序没有任何作用。最佳答案停靠布局
javascript - 如何在 ext.panel.Panel 内的 Ext.js 中添加列
我正在设计一个屏幕，其中标题有一个具有某些功能的按钮。为了实现这一点，我使用了 Ext.panel.Panel 现在我想在此屏幕中的标题下方添加列。这是我的代码: var screen = Ext.c
javascript - Extjs 4.1 (rc2) - Ext.panel.Panel 上的扩展有时无法完成渲染
我有一个在 Ext.panel.Panel 上扩展的类。简化代码: Ext.define("some.namespace.MyOwnPanel", { extends: "Ext.panel
javascript - Bootstrap : How to make panels auto collapse when clicking on another panel?
在 Bootstrap 中，如何在单击另一个面板时使面板自动折叠，以便一次只打开一个面板？我不太擅长 JavaScript。这里是一些示例代码: Information
java - 边框布局 : Nested CENTER Panel Grows But does Not Resize Outer Panel
我有一个主 JPanel，它实现了 Scrollable 并使用了 BorderLayout。它包含一个 NORTH 只读 JEditorPane、一个带有 FlowLayout 的 CENTER J
python - 如何从其父级(另一个 wx.panel 对象)中删除或销毁 wx.panel？
我正在用 wxPython 开发一个 GUI。我在另一个代表 CD 容器对象的正方形(也有 wxPanel 类)内绘制一个代表 CD 对象的正方形。我想在 CDWindow 的右键菜单中有“删除这张
html - Bootstrap Fieldset Legend 完全被 Panel Panel-default 覆盖
我在第一个 div 中有两个字段集，然后我使用面板，但我的面板从 div 上方覆盖，请看下面的屏幕截图 1.) 带有文件集和详细信息2.) 添加面板后，Panel-heading to page 覆盖
python - wxPython:在现有 wx.Panel 上覆盖 wx.Panel 的好方法
我有一个 wx.Frame，其中有一个主 wx.Panel，里面有几个小部件。我想要那里的一个按钮导致出现“帮助面板”。这个帮助面板可能是一个 wx.Panel，我希望它覆盖整个主 wx.Panel(

首页

博学

6Ren·AI

商城

css - Bootstrap panel-footer with button pull-right

原始答案(2017)

更新 (2023-01-11)

Bootstrap 5

Bootstrap 4 & 3