如何将引导按钮对齐到引导面板中选择选项的右侧

作者：kikokikolove | 2023-09-06 14:04

如何解决《如何将引导按钮对齐到引导面板中选择选项的右侧》经验，为你挑选了1个好方法。

我想按照图表将引导按钮对齐到右边.请注意我使用的是Bootstrap面板和form-horizontal: 在此输入图像描述

默认情况下,按钮位于选项下方.我试过的:

Referrer

haxxxton.. 6

您可以利用Bootstrap input-group和input-group-addon类.然后我们只需要更新样式来处理里面的按钮.

在此输入图像描述

HTML


    
    
        Contact

CSS

.input-group-button {
    padding: 0 0 0 5px;
    border-color: transparent;
    background: none;
}

的jsfiddle

PS.你似乎已经把引荐text-right按钮INSIDE您选择的元素.这不会工作,应该更新

更新

如果你希望你的按钮感觉更加"附加"到选择,你必须"关闭"webkits默认border-radius覆盖.input-group .form-control的border-radius,但是然后可以做类似的事情:

在此输入图像描述

CSS

.input-group-button {
    padding: 0;
    border:none;
    background: none;
}
.input-group .input-group-button:first-child .btn{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.input-group .input-group-button:last-child .btn{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.input-group select.form-control{
    -webkit-appearance: none;
}

更新了JS Fiddle

注意:这将删除浏览器添加的"箭头",因此可能不是您所追求的

1> haxxxton..：

您可以利用Bootstrap input-group和input-group-addon类.然后我们只需要更新样式来处理里面的按钮.

在此输入图像描述

HTML


    
    
        Contact

CSS

.input-group-button {
    padding: 0 0 0 5px;
    border-color: transparent;
    background: none;
}

的jsfiddle

PS.你似乎已经把引荐text-right按钮INSIDE您选择的元素.这不会工作,应该更新

更新

如果你希望你的按钮感觉更加"附加"到选择,你必须"关闭"webkits默认border-radius覆盖.input-group .form-control的border-radius,但是然后可以做类似的事情:

在此输入图像描述

CSS

.input-group-button {
    padding: 0;
    border:none;
    background: none;
}
.input-group .input-group-button:first-child .btn{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.input-group .input-group-button:last-child .btn{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.input-group select.form-control{
    -webkit-appearance: none;
}

更新了JS Fiddle

注意:这将删除浏览器添加的"箭头",因此可能不是您所追求的

推荐阅读

程序员
无法在Android Studio中更新JDK位置

如何解决《无法在AndroidStudio中更新JDK位置》经验，为你挑选了1个好方法。 ... [详细]
程序员
在相同片段的不同实例之间进行通信

如何解决《在相同片段的不同实例之间进行通信》经验，为你挑选了2个好方法。 ... [详细]
程序员
C++ 11如何通过int值获取枚举类值？

如何解决《C++11如何通过int值获取枚举类值？》经验，为你挑选了2个好方法。 ... [详细]
程序员
安装和注册shell扩展上下文菜单来自wix安装程序

如何解决《安装和注册shell扩展上下文菜单来自wix安装程序》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何使用retofit2和RxAndroid取消请求

如何解决《如何使用retofit2和RxAndroid取消请求》经验，为你挑选了1个好方法。 ... [详细]
程序员
为什么非const std :: array :: operator []不是constexpr？

如何解决《为什么非conststd::array::operator[]不是constexpr？》经验，为你挑选了3个好方法。 ... [详细]
程序员
如何使用CSS水平居中链接元素？

如何解决《如何使用CSS水平居中链接元素？》经验，为你挑选了1个好方法。 ... [详细]
程序员
更改字符时拆分字符串

如何解决《更改字符时拆分字符串》经验，为你挑选了2个好方法。 ... [详细]
程序员
PEAR和Composer有什么区别？

如何解决《PEAR和Composer有什么区别？》经验，为你挑选了1个好方法。 ... [详细]
程序员
哪一个是有效的初始化变量ie)构造函数或激活方法？

如何解决《哪一个是有效的初始化变量ie)构造函数或激活方法？》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何使用正则表达式对列表元素进行排序？

如何解决《如何使用正则表达式对列表元素进行排序？》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用Swift中的UITextView属性自定义UIView的加载时间较慢

如何解决《使用Swift中的UITextView属性自定义UIView的加载时间较慢》经验，为你挑选了1个好方法。 ... [详细]
程序员
什么时候应该使用静态数据成员与const全局变量？

如何解决《什么时候应该使用静态数据成员与const全局变量？》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何保持cts:从匹配内部XML标签突出显示？

如何解决《如何保持cts:从匹配内部XML标签突出显示？》经验，为你挑选了1个好方法。 ... [详细]
程序员
IIS配置错误 - 此配置部分不能在此路径中使用

如何解决《IIS配置错误-此配置部分不能在此路径中使用》经验，为你挑选了5个好方法。 ... [详细]
程序员
保护和加密多租户云应用程序的共享数据库中的数据

如何解决《保护和加密多租户云应用程序的共享数据库中的数据》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何在不编写长查询的情况下查询所有GraphQL类型字段？

如何解决《如何在不编写长查询的情况下查询所有GraphQL类型字段？》经验，为你挑选了4个好方法。 ... [详细]
程序员
拖放将自定义HTML拖放为拖动图像

如何解决《拖放将自定义HTML拖放为拖动图像》经验，为你挑选了1个好方法。 ... [详细]
程序员
C中三个有效值的平均值

如何解决《C中三个有效值的平均值》经验，为你挑选了0个好方法。 ... [详细]
程序员
用JavaScript创建MP4视频

如何解决《用JavaScript创建MP4视频》经验，为你挑选了1个好方法。 ... [详细]