Css 移动设备上的水平对齐导航栏元素-引导3
我想用以下元素序列显示响应视图的导航栏 菜单(按钮)品牌(居中)搜索(图标)登录(图标) 我尝试了很多方法来完成它,但没有成功。目前,在移动分辨率中,它们分为三行 以下是>中的代码 对于桌面视图,元素按照所需的顺序对齐 是否可以按移动视图的指定顺序将它们全部对齐?使用此选项:Css 移动设备上的水平对齐导航栏元素-引导3,css,twitter-bootstrap-3,navbar,collapse,Css,Twitter Bootstrap 3,Navbar,Collapse,我想用以下元素序列显示响应视图的导航栏 菜单(按钮)品牌(居中)搜索(图标)登录(图标) 我尝试了很多方法来完成它,但没有成功。目前,在移动分辨率中,它们分为三行 以下是>中的代码 对于桌面视图,元素按照所需的顺序对齐 是否可以按移动视图的指定顺序将它们全部对齐?使用此选项: @media screen and (max-width: 768px) { .row { position: relative; } .navbar-header {
@media screen and (max-width: 768px) {
.row {
position: relative;
}
.navbar-header {
left: 0;
position: absolute;
top: 0;
}
.navbar-brand {
float: none;
box-sizing: border-box;
height: 50px;
padding: 14px 50px;
text-align: center;
width: 100%;
}
.navbar-right {
margin: 0;
position: absolute;
right: 0;
top: 0;
}
.navbar-right > li {
display: inline-block;
margin-top: 4px;
}
}
演示: