Navbar-toggle按钮位于右上角的网络和移动模式下,但当导航栏在移动模式下崩溃时出现问题(最后一张图片)。
我知道这是因为我的代码的行顺序,但我不知道如何修复它。
网络模式:
移动模式:
折叠移动模式:
const firstNumber = document.getElementById('tbFirstNumber');
const secondNumber = document.getElementById('tbSecondNumber');
const operation = document.getElementById('ddlOperation');
const operationVal = operation.options[operation.selectedIndex].value;
const btn = document.getElementById('btnExecute');
const display = document.getElementById('display');
let result = '';
const regNumbers = /[0-9]{1,}/;
btn.addEventListener('click', function(argument) {
if (regNumbers.test(firstNumber.value) && regNumbers.test(secondNumber.value)) {
if (operationVal == 0) {
alert(operationVal);
result = 'Operation has not been chosen';
} else {
switch (operationVal) {
case 'add':
result = 'Result is: ' + (firstNumber.value + secondNumber.value);
break;
default:
// statements_def
break;
}
}
} else {
result = 'Number entry is not correct.';
};
display.innerHTML = result;
});
答案 0 :(得分:0)
解决这个问题的一种方法是:
将导航栏品牌项目后的红色按钮代码放入HTML
为其提供课程ml-auto order-lg-last
。前者意味着" margin-left:auto"后者将在大(lg
)或更大的屏幕上重新排序该按钮并将其放在最后位置。然后,ml-auto
会将其推向右侧。
将转发器(应该在HTML中的红色按钮之后)提供ml-2
类,以便在它和红色按钮之间留出一点空间。
点击"运行代码段"按钮下方并展开到整页:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">EVENT</a>
<div class="nav-item ml-auto order-lg-last">
<input class="btn btn-danger" type="submit" value="Create">
</div>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<?=$_SESSION['name'];?>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="login/logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
&#13;