Bootstrap 4网格列重叠[重复]
Posted
技术标签:
【中文标题】Bootstrap 4网格列重叠[重复]【英文标题】：Bootstrap 4 grid columns overlapping [duplicate] 【发布时间】：2018-07-31 10:02:56 【问题描述】：h1 标签与表单重叠， 有人对此有解决方案吗？ 我正好使用了 12 列，但它们仍然重叠。
.SearchStyle2
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
.headerStyle
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 0px;
position: absolute;
right: 0px;
width: 500px;
padding: 10px;
.headerH1Style
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;
width: 100%;
.headerElementsStyle
padding-right: 15px;
.searchStyle
position: absolute;
right: 450px;
width: 350px;
<body>
<div class="container-fluied d-none d-md-block ">
<div class="row">
<div class="col-xs-4 headerH1Style">
<h1>Great Bookstore!</h1>
</div>
<div class="col-xs-4 searchStyle">
<form class="form-inline SearchStyle2 ">
<input type="text " class="form-control " placeholder="Enter ISBN ">
<div class="input-group-append ">
<button class="btn btn-primary " type="button ">Search</button>
</div>
</form>
</div>
<div class="container-fluied headerStyle col-xs-4">
<a class="headerElementsStyle" href="# ">Sign Up <img src="signup.png"></img> </a>
<a class="headerElementsStyle" href="# ">Login <img src="keylogin.png"> </img>
</a>
<a class="headerElementsStyle" href="#"> Cart <img src="cart%20(1).png"> </img> </a>
<a class="headerElementsStyle" href="# ">Wish List <img src="wishlist%20(1).png"> </img></a>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
container-fluied 应该是container-fluid ...并且bootstrap V4中没有xs了
【参考方案1】：
删除.search-style 并设置 col-md-4 而不是 col-xs-4 似乎效果更好。
.SearchStyle2
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
.headerStyle
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 0px;
position: absolute;
right: 0px;
width: 500px;
padding: 10px;
.headerH1Style
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;
width: 100%;
.headerElementsStyle
padding-right: 15px;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="container-fluied d-none d-md-block ">
<div class="row">
<div class="col-md-4 headerH1Style">
<h1>Great Bookstore!</h1>
</div>
<div class="col-md-4 searchStyle">
<form class="form-inline SearchStyle2 ">
<input type="text " class="form-control " placeholder="Enter ISBN ">
<div class="input-group-append ">
<button class="btn btn-primary " type="button ">Search</button>
</div>
</form>
</div>
<div class="container-fluied headerStyle col-md-4">
<a class="headerElementsStyle" href="# ">Sign Up <img src="signup.png"></img> </a>
<a class="headerElementsStyle" href="# ">Login <img src="keylogin.png"> </img>
</a>
<a class="headerElementsStyle" href="#"> Cart <img src="cart%20(1).png"> </img> </a>
<a class="headerElementsStyle" href="# ">Wish List <img src="wishlist%20(1).png"> </img></a>
</div>
</div>
</div>
</body>
</html>【讨论】：
【参考方案2】：标题之所以跨越整个页面是因为类：
.headerH1Style
width: 100%;
当你将你的类设置为“col-xs-4 headerH1Style”时，css首先读取col-xs-4的宽度，然后用headerH1Style的width属性覆盖它。
只需删除 width: 100% 属性即可使 col-xs-4 类正常运行。
编辑： Float：left 应该使表单对象内联。并不是说 h1 按说是在推动表单，而是输入和按钮在 css 中没有适当的位置属性。
<div class="col-xs-4 searchStyle">
<form class="form-inline SearchStyle2 ">
<input type="text " class="form-control " placeholder="Enter ISBN " style="float:left">
<div class="input-group-append " "float:left">
<button class="btn btn-primary " type="button ">Search</button>
</div>
</form>
</div>
【讨论】：
我删除了该属性，问题仍然存在:( 是搜索按钮不与文本字段内联的主要问题吗？如果是这样，请尝试添加这个来放置输入和按钮：style="float:left"。检查上面的编辑代码。 imgur.com/a/8OuEd 请看截图，搜索栏与h1标签重叠 当我减小屏幕尺寸时会发生这种情况以上是关于Bootstrap 4网格列重叠[重复]的主要内容，如果未能解决你的问题，请参考以下文章