个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个使用 Bootstrap 4 的导航布局。我已经尽我所能让它看起来很专业，但我正在努力让它在桌面和移动布局上看起来像我想要的方式(在移动设备上，主要是切换按钮显示在右侧)。
我非常精通这类事情，但我忙于后端工作，我想 flexbox 并没有按我预期的方式工作。
在桌面上，我试图在导航中获取 account 链接，并使其与顶部导航行右对齐，在移动设备上，我想要 account 链接放置在折叠导航的底部。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap, js, and jquery -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<!-- font awesome-->
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/fontawesome-pro/css/all.css" rel="stylesheet" type="text/css"/>
<!-- custom files -->
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/main_style.css" rel="stylesheet" type="text/css"/>
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/form_style.css" rel="stylesheet" type="text/css"/>
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/animation_css.css" rel="stylesheet" type="text/css"/>
<script src="https://exactestate.sfo2.digitaloceanspaces.com/static/js/local_timezone_cookie.js"></script>
</head>
<body>
<div class="main">
<style>
#logo {
vertical-align: middle;
width: 50px;
}
.navbar-brand span {
color: white;
font-size: 2rem;
line-height: 1.2;
font-weight: 200;
display: inline-block;
vertical-align: middle;
padding: 0 0 0 15px;
}
.navbar-brand b {
display: block;
font-size: 50%;
line-height: 1;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-toggler-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse flex-column" id="navbar">
<!-------------------------------------------------------------------------------------------------------no flex -->
<ul class="navbar-nav mr-auto no_flex">
<a class="navbar-brand" href="#"><img id="logo" alt="Logo" src="https://exactestate.sfo2.digitaloceanspaces.com/static/images/logo_white.png">
<span>ExactEstate<b>Management Software</b></span>
</a>
</ul>
<ul class="navbar-nav mr-auto">
<!-------------------------------------------------------------------------------------------------------Users-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
<i class="fas fa-users" style="color:white;"></i> Users
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'users_create' CLIENT.id %}"><i
class="far fa-user-plus"></i> Register User</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'users_index' CLIENT.id %}"><i
class="fas fa-users"></i> Users</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Applications-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
<i class="fa fa-book" style="color:white;"></i> Applications
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'applications_create' CLIENT.id %}">
<i class="fas fa-file-plus"></i> New Application</a>
<a class="dropdown-item" href="{% url 'applications_index' CLIENT.id %}">
<i class="fas fa-cabinet-filing"></i> Existing Applications</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item"
href="{% url 'applications_processing_management' CLIENT.id %}">
<i class="far fa-ballot-check"></i> Management Processing</a>
<a class="dropdown-item"
href="{% url 'applications_processing_compliance' CLIENT.id %}">
<i class="fas fa-ballot-check"></i> Compliance Processing</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item"
href="{% url 'applications_preleasing' CLIENT.id %}">
<i class="fa fa-book"></i> Application Dashboard and Preleasing</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Properties-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button">
<i class="far fa-building" style="color:white;"></i> Properties
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'properties_index' CLIENT.id %}">
<i class="far fa-building"></i> Properties</a>
<a class="dropdown-item" href="{% url 'properties_units_search' CLIENT.id %}">
<i class="fas fa-bed"></i> Units</a>
<a class="dropdown-item" href="{% url 'properties_water_billing_index' CLIENT.id %}">
<i class="far fa-tint"></i> Water Billing</a>
<a class="dropdown-item" href="{% url 'merchant_accounts_index' CLIENT.id %}">
<i class="far fa-usd-square"></i> Merchants</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Prospects-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
<i class="far fa-layer-plus" style="color:white;"></i> Prospects
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'guest_cards_index' CLIENT.id %}">
<i class="fal fa-id-card-alt"></i> Guest Cards
</a>
<a class="dropdown-item" href="{% url 'appointments_index' CLIENT.id %}">
<i class="fal fa-phone"></i> Appointments
</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Residents-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
<i class="far fa-people-carry" style="color:white;"></i> Residents
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'residents_ledgers_index' CLIENT.id %}">
<i class="far fa-file-invoice-dollar"></i> Ledgers</a>
<a class="dropdown-item" href="{% url 'residents_late_fees' CLIENT.id %}">
<i class="far fa-file-invoice-dollar"></i> Late Fee Declaration</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'residents_index' CLIENT.id %}">
<i class="fas fa-search"></i> Resident Search</a>
<a class="dropdown-item" href="{% url 'residents_extras_index' CLIENT.id %}">
<i class="fas fa-plus-square"></i> Resident Extras</a>
<a class="dropdown-item" href="{% url 'residents_create' CLIENT.id %}">
<i class="fal fa-person-booth"></i> Enter Residents</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'residents_renewals' CLIENT.id %}">
<i class="fal fa-calendar-plus"></i> Renewals</a>
{# <a class="dropdown-item" href="\{{ CLIENT.id }}\residents\renewal_settings\">#}
{# <i class="fal fa-cog"></i> Renewal Settings</a>#}
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Tasks-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
<i class="fas fa-tasks" style="{% if OPEN_TASKS %}color:red;{% else %}color:white;{% endif %}"></i> Tasks
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'tasks_create' CLIENT.id %}">
<i class="far fa-plus"></i> Create </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'tasks_list' CLIENT.id %}">
<i class="fal fa-eye" style="{% if OPEN_USER_TASKS %}color:red;{% endif %}"></i> View Completable Tasks
</a>
<a class="dropdown-item" href="{% url 'tasks_status' CLIENT.id %}">
<i class="fal fa-eye" style="{% if OPEN_SYSTEM_TASKS %}color:red;{% endif %}"></i> View Created Tasks
</a>
</div>
</li>
<!----------------------------------------------------------------------------------------------------Reports-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
<i class="fas fa-file-chart-line" style="color:white;"></i> Reports
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'reports_index' CLIENT.id %}">
<i class="far fa-file-chart-line"></i> Reports
</a>
</div>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<!------------------------------------------------------------------------------------------------------Documents-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
<i class="fas fa-folder-open" style="color:white;"></i> Documents
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'documents_upload' CLIENT.id %}">
<i class="far fa-file-upload"> </i> Upload Documents </a>
<a class="dropdown-item" href="{% url 'documents_index' CLIENT.id %}">
<i class="far fa-file-download"></i> Download Documents </a>
<a class="dropdown-item" href="{% url 'documents_builder_index' CLIENT.id %}">
<i class="far fa-hard-hat"></i> Document Builder </a>
</div>
</li>
<!------------------------------------------------------------------------------------------------------Forms-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
<i class="fab fa-wpforms" style="color:white;"></i> Forms
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'forms_index' CLIENT.id %}">
<i class="fab fa-wpforms"></i> View Forms</a>
<a class="dropdown-item" href="{% url 'forms_declarations_index' CLIENT.id %}">
<i class="fab fa-wpforms"></i> Create Form Declarations</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Work Orders-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
<i class="far fa-user-hard-hat" style="color:white;"></i> Work Orders
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'work_orders_declarations' CLIENT.id %}">
<i class="fal fa-flag-checkered"></i> Work Order Declaration </a>
<a class="dropdown-item" href="{% url 'work_orders_index' CLIENT.id %}">
<i class="fal fa-eye"></i> View Work Orders
</a>
<a class="dropdown-item" href="{% url 'work_orders_submit' CLIENT.id %}">
<i class="fas fa-clipboard-list"></i> Submit Work Order
</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Visitors-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-user-plus" style="color:white;"></i> Visitors
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'visitors_enter' CLIENT.id %}"><i class="fas fa-user-plus"></i> Enter
Visitor</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'visitors_index' CLIENT.id %}"><i class="fas fa-users"></i> Visitors</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user" style="color: white"></i> Account
</a>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="navDropdown">
<h4 style="text-align:center;">Account </h4>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'update_account' CLIENT.id %}">
<i class="far fa-edit"></i> Edit Account Information</a>
<a class="dropdown-item" href="{% url 'login_logout' CLIENT.id %}">
<i class="far fa-sign-out-alt"></i> Logout</a>
</div>
</li>
</ul>
</div>
</nav>最佳答案
编辑:在 OP 明确表示他的期望后，我修改了代码并添加了 media queries由于移动屏幕和桌面屏幕之间元素的不同定位，我仍然保留了整个菜单的 div 包装器并使其成为 float-left。
下面的演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap, js, and jquery -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<!-- font awesome-->
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/fontawesome-pro/css/all.css" rel="stylesheet" type="text/css"/>
<!-- custom files -->
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/main_style.css" rel="stylesheet" type="text/css"/>
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/form_style.css" rel="stylesheet" type="text/css"/>
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/animation_css.css" rel="stylesheet" type="text/css"/>
<script src="https://exactestate.sfo2.digitaloceanspaces.com/static/js/local_timezone_cookie.js"></script>
</head>
<style>
.example{
border: solid black;
}
</style>
<body>
<div class="main">
<header>
<style>
#logo {
vertical-align: middle;
width: 50px;
}
.navbar-brand span {
color: white;
font-size: 2rem;
line-height: 1.2;
font-weight: 200;
display: inline-block;
vertical-align: middle;
padding: 0 0 0 15px;
}
.navbar-brand b {
display: block;
font-size: 50%;
line-height: 1;
}
@media (min-width: 992px) {
#applicationsMenu {
margin-left: 100px;
margin-top: -50px;
}
#documentsMenu {
margin-left: 100px;
}
#accountMenu {
position: absolute !important;
top: 5px;
right: 10px;
}
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-toggler-right ml-auto">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<div class="float-left">
<!-------------------------------------------------------------------------------------------------------no fle -->
<a class="navbar-brand" href="#"><img id="logo" alt="Logo" src="https://exactestate.sfo2.digitaloceanspaces.com/static/images/logo_white.png">
<span class="d-lg-none">ExactEstate<b>Management Software</b></span>
</a>
<ul id="applicationsMenu" class="navbar-nav">
<!-------------------------------------------------------------------------------------------------------Users-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
<i class="fas fa-users" style="color:white;"></i> Users
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'users_create' CLIENT.id %}"><i
class="far fa-user-plus"></i> Register User</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'users_index' CLIENT.id %}"><i
class="fas fa-users"></i> Users</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Applications-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
<i class="fa fa-book" style="color:white;"></i> Applications
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'applications_create' CLIENT.id %}">
<i class="fas fa-file-plus"></i> New Application</a>
<a class="dropdown-item" href="{% url 'applications_index' CLIENT.id %}">
<i class="fas fa-cabinet-filing"></i> Existing Applications</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item"
href="{% url 'applications_processing_management' CLIENT.id %}">
<i class="far fa-ballot-check"></i> Management Processing</a>
<a class="dropdown-item"
href="{% url 'applications_processing_compliance' CLIENT.id %}">
<i class="fas fa-ballot-check"></i> Compliance Processing</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item"
href="{% url 'applications_preleasing' CLIENT.id %}">
<i class="fa fa-book"></i> Application Dashboard and Preleasing</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Properties-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button">
<i class="far fa-building" style="color:white;"></i> Properties
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'properties_index' CLIENT.id %}">
<i class="far fa-building"></i> Properties</a>
<a class="dropdown-item" href="{% url 'properties_units_search' CLIENT.id %}">
<i class="fas fa-bed"></i> Units</a>
<a class="dropdown-item" href="{% url 'properties_water_billing_index' CLIENT.id %}">
<i class="far fa-tint"></i> Water Billing</a>
<a class="dropdown-item" href="{% url 'merchant_accounts_index' CLIENT.id %}">
<i class="far fa-usd-square"></i> Merchants</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Prospects-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
<i class="far fa-layer-plus" style="color:white;"></i> Prospects
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'guest_cards_index' CLIENT.id %}">
<i class="fal fa-id-card-alt"></i> Guest Cards
</a>
<a class="dropdown-item" href="{% url 'appointments_index' CLIENT.id %}">
<i class="fal fa-phone"></i> Appointments
</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Residents-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
<i class="far fa-people-carry" style="color:white;"></i> Residents
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'residents_ledgers_index' CLIENT.id %}">
<i class="far fa-file-invoice-dollar"></i> Ledgers</a>
<a class="dropdown-item" href="{% url 'residents_late_fees' CLIENT.id %}">
<i class="far fa-file-invoice-dollar"></i> Late Fee Declaration</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'residents_index' CLIENT.id %}">
<i class="fas fa-search"></i> Resident Search</a>
<a class="dropdown-item" href="{% url 'residents_extras_index' CLIENT.id %}">
<i class="fas fa-plus-square"></i> Resident Extras</a>
<a class="dropdown-item" href="{% url 'residents_create' CLIENT.id %}">
<i class="fal fa-person-booth"></i> Enter Residents</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'residents_renewals' CLIENT.id %}">
<i class="fal fa-calendar-plus"></i> Renewals</a>
{# <a class="dropdown-item" href="\23\residents\renewal_settings\">#}
{# <i class="fal fa-cog"></i> Renewal Settings</a>#}
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Tasks-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
<i class="fas fa-tasks" style="{% if OPEN_TASKS %}color:red;{% else %}color:white;{% endif %}"></i> Tasks
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'tasks_create' CLIENT.id %}">
<i class="far fa-plus"></i> Create </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'tasks_list' CLIENT.id %}">
<i class="fal fa-eye" style="{% if OPEN_USER_TASKS %}color:red;{% endif %}"></i> View Completable Tasks
</a>
<a class="dropdown-item" href="{% url 'tasks_status' CLIENT.id %}">
<i class="fal fa-eye" style="{% if OPEN_SYSTEM_TASKS %}color:red;{% endif %}"></i> View Created Tasks
</a>
</div>
</li>
<!----------------------------------------------------------------------------------------------------Reports-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
<i class="fas fa-file-chart-line" style="color:white;"></i> Reports
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'reports_index' CLIENT.id %}">
<i class="far fa-file-chart-line"></i> Reports
</a>
</div>
</li>
</ul>
<ul id="documentsMenu" class="navbar-nav">
<!------------------------------------------------------------------------------------------------------Documents-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
<i class="fas fa-folder-open" style="color:white;"></i> Documents
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'documents_upload' CLIENT.id %}">
<i class="far fa-file-upload"> </i> Upload Documents </a>
<a class="dropdown-item" href="{% url 'documents_index' CLIENT.id %}">
<i class="far fa-file-download"></i> Download Documents </a>
<a class="dropdown-item" href="{% url 'documents_builder_index' CLIENT.id %}">
<i class="far fa-hard-hat"></i> Document Builder </a>
</div>
</li>
<!------------------------------------------------------------------------------------------------------Forms-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
<i class="fab fa-wpforms" style="color:white;"></i> Forms
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'forms_index' CLIENT.id %}">
<i class="fab fa-wpforms"></i> View Forms</a>
<a class="dropdown-item" href="{% url 'forms_declarations_index' CLIENT.id %}">
<i class="fab fa-wpforms"></i> Create Form Declarations</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Work Orders-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
<i class="far fa-user-hard-hat" style="color:white;"></i> Work Orders
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown">
<a class="dropdown-item" href="{% url 'work_orders_declarations' CLIENT.id %}">
<i class="fal fa-flag-checkered"></i> Work Order Declaration </a>
<a class="dropdown-item" href="{% url 'work_orders_index' CLIENT.id %}">
<i class="fal fa-eye"></i> View Work Orders
</a>
<a class="dropdown-item" href="{% url 'work_orders_submit' CLIENT.id %}">
<i class="fas fa-clipboard-list"></i> Submit Work Order
</a>
</div>
</li>
<!-------------------------------------------------------------------------------------------------------Visitors-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-user-plus" style="color:white;"></i> Visitors
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'visitors_enter' CLIENT.id %}"><i class="fas fa-user-plus"></i> Enter
Visitor</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'visitors_index' CLIENT.id %}"><i class="fas fa-users"></i> Visitors</a>
</div>
</li>
<li id="accountMenu" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user" style="color: white"></i> Account
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navDropdown">
<h4 style="text-align:center;">Account </h4>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'update_account' CLIENT.id %}">
<i class="far fa-edit"></i> Edit Account Information</a>
<a class="dropdown-item" href="{% url 'login_logout' CLIENT.id %}">
<i class="far fa-sign-out-alt"></i> Logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
</div>
<footer>
<div class="accent_color" style="height:5px;"></div>
<div class="over_copyright" style="min-height: 25px;">
<div class="container-fluid center">
<div class="row">
<div class="col-sm-6"><p class="in_footer_text" style="text-align: left;"></p></div>
<div class="col-sm-6"><p class="in_footer_text" style="text-align: right;"></p></div>
</div>
</div>
</div>
<p class="in_footer_text">© ViaTech Systems® 2019. All Rights Reserved.</p>
</footer>
</body>
</html>关于html - Bootstrap Navigation Flex-Column 问题与堆叠 ml-auto 和 mr-auto，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56398915/
25
4
0
我是 React Native 的新手，目前正在研究 React Native Navigation Docs 。我想知道:navigation.push() 和 navigation.navigat
来自 this和 this , 我了解到 navigation.navigate() 之间存在有意义的差异和 navigation.push() .尽管如此，我仍然想知道我是否可以使用 navigat
我正在使用 react-navigation 3.6.1 和 react-native-camera 2.2.2。当我拍照时，进入下一个屏幕的按钮在第一次按下时没有任何作用。必须按多次 这是针对 io
androidx.navigation:navigation-ui 和 android.arch.navigation:navigation-ui-ktx 有什么区别？ 当我在我的 gradle 中使
使用 TypeScript 时，react-navigation 中发生的一个常见错误是: Argument of type 'string' is not assignable to paramet
我有一个使用 React Native 的应用程序，我正在使用 react-navigation (5.2.9)。 我构建了一个 Stack.Navigator，我有我的屏幕，但我希望页脚组件在外面，
我有一个组件在 NavigationContainer 组件内但在 Stack Navigator 之外。我能知道组件中的当前路由是什么吗？我不能使用 useRoute Hook ，因为它出错了: C
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 3年前关闭。 Improve this questi
我正在学习 react-native 导航 https://reactnavigation.org/docs/intro/ 。我在那里的例子中看到 class HomeScreen extends R
我在我的 native 项目中使用 eslint airbnb。如果我没有验证 Prop ，特别是来自 react-navigation 的 Prop ，eslint 会抛出错误 linting .
在我的应用程序中，我有 6 个不同的页面。 有 1 个页面称为“收藏夹页面”，其中列出了用户选择的收藏夹。它们由一列显示，该列使用来自另一个类的列表。列表代码如下: List favoriteCo
我在 react 导航问题部分看到很多人使用 this.props.navigation.dispatch 以编程方式导航。是否有任何特定原因或用例需要在 this.props.navigation.
我在 vue.js 中开始了一个新元素。我添加了导航栏。有一次，我注意到控制台中有问题: Audit usage of navigator.userAgent, navigator.appVersio
首先，是的，我知道有很多与此问题相关的答案，但我发现了这种在 react-native 0.60 中进行导航的特定方法，问题是，我还没有弄清楚，而且我不想刮掉这个导航方法来测试不同的方法，这是导航文件
react 导航 5 我在 TabNavigator 内部构建了一个 StackNavigator，并且主屏幕和其他屏幕之间的导航正在工作。但问题是，当我从 Tab2 移动到 Tab1 时，我希望 T
我正在尝试在 react-native with expo 中使用 react-navigation-redux-helpers 将 redux 与 react-navigation 集成。但是，尽管
我正在尝试使用最新的 react-navigation 版本运行我的应用程序但无法正常工作。也尝试使用此解决方案 ( Invariant Violation: The navigation prop
我正在尝试使用 React Navigation 和 StackNavigator 在我的应用中导航。 我有一个带有 onPress={() => navigate('DetailsScreen'
我在我的应用程序中使用 react 导航。如果我从 screen A 导航到 Screen B，如果转换完成，我如何获得一些反馈。 最佳答案 从 'react-native 导入 { Interact
我遵循的是身份验证流程 (https://reactnavigation.org/docs/en/auth-flow.html) 上的 React 导航指南，但略有不同。我在 LoginScreen
我是一名优秀的程序员,十分优秀！