简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > HTML Tutorial > body text

Bootstrap的下拉菜单float问题_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:35:06
Original
1202 people have browsed it

在学习bootstrap中的下拉菜单时，遇到下面情况：
Copy after login

添加ul的类名为pull-right或dropdown-menu-right，可以改变下拉菜单的对其方向，效果图为：

默认样式为:

下面贴上：.pull-right的css代码

.dropdown-menu.pull-right {  right: 0;  left: auto;}.dropdown-menu-right {  right: 0;  left: auto;}
Copy after login

但还需要设置父元素div的样式为float:left！！！

原因：

div是块级元素，会自动填满父元素的宽度，效果图：

 

当设置了div的float为left之后，div会脱离文档流，从而包裹button元素，是菜单向button右边对齐

假如你有补充，请评论下。么么哒~~~

 

Related labels：
Bootstrap的下拉菜单float问题
source：php.cn
Previous article：浏览器内核总结 Next article：做小图标还用sprite图？你out了！史上最简单易懂iconfont使用教程_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Latest Articles by Author
Latest Issues
The rewritten title is: How to implement automatic closing of submenu in jQuery I'm trying to create a jQuery dropdown menu for a mobile view. I'm new to jQuery and I'm u...
From 2023-09-16 09:10:19
0
2
693
React - Handsontable datagrid: move columns and update status I'm using a library for React and I have a list (array) of headers and on the other side a...
From 2023-09-15 21:51:29
0
1
307
Title rewritten as: How to resize text in all input areas (including email signup, comment box and recipe index page dropdown) in CSS? Website: https://olivesfordinner.com/ Looking for CSS code that will make the text larger ...
From 2023-09-14 15:17:43
0
2
247
"Unable to open Bootstrap menu" I searched for a long time why my Bootstrap menu doesn't open. I first linked JQuery to ma...
From 2023-09-13 20:11:40
0
1
231
Use drop-down menus to change what appears in the table I'm trying to create a simple repair form using HTML, using a dropdown I want to be able t...
From 2023-09-13 16:30:42
0
1
220
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！