html - Bootstrap - 当宽度改变时,div 中的元素分成 2 行
问题描述
div 中的元素在width < 720px
. 我认为这与我使用 Bootstrap 的网格系统有关。
<nav id="navbar" class="navbar navbar-expand-md navbar-light bg-light">
这行代码使用navbar-expand-md
,这意味着根据 Bootstrap 4.2 文档,最大容器宽度为 720px。但我找不到解决此问题的方法。
我怎样才能解决这个问题?
这是小提琴链接:https ://jsfiddle.net/17g6uqvt/
解决方案
添加 CSSinline-block
属性#search-box
#search-box {
width: 250px;
border: none;
height: 1.8rem;
display: inline-block;
}
更改一些javascript函数
var COLLAPSE_WIDTH = 768;
function init_navbar () {
$('.nav-link').on( {
mouseenter: function () {
$(this).addClass('hover');
},
mouseleave: function () {
$(this).removeClass('hover');
}
});
window.isCollapsed = true;
$('.btn-search').on('click', function () {
if (window.windowSize > COLLAPSE_WIDTH) {
$('#search-box').toggleClass('hidden');
$('.navbar-nav').toggleClass('hidden');
}
window.isCollapsed = !isCollapsed
});
}
function check_width() {
window.windowSize = $(window).width();
if (windowSize < COLLAPSE_WIDTH) {
$('#search-box').removeClass('hidden');
//$('#search-btn').addClass('hidden');
$('.navbar-nav').removeClass('hidden');
$('.nav-link').addClass('collapsed');
}
if (windowSize > COLLAPSE_WIDTH) {
$('#search-box').addClass('hidden');
//$('#search-btn').removeClass('hidden');
$('.navbar-nav').removeClass('hidden');
$('.nav-link').removeClass('collapsed');
}
}
$(document).ready(function() {
check_width();
$(window).resize(check_width);
init_navbar();
});
推荐阅读
- powershell - 从文件中删除重复的行,保持 csv 中的原始顺序
- python - 用数组中的下一个最大元素替换元素
- dart - 飞镖中是否有任何 NotNull 注释?
- sql - 用一个查询替换多个查询,这将给出相同的结果
- python-3.x - 定义的函数调用返回名称未定义的错误
- sql - SSIS 包在从网络读取输入流时出现致命错误
- amazon-web-services - sagemaker 上的 AccessDeniedException:AWS SageMaker Studio 中的 CreateDomain,尽管有 SageMakerFullAccess
- python - 当我尝试使用我的 API 插入寄存器时出现错误 #1064 MySQL
- python-3.x - Decode Instaloader session file
- javascript - How do I alter vue component programmaticaly?