Bootstrap 4网格列重叠[重复]答案

【问题标题】：Bootstrap 4 grid columns overlapping [duplicate]Bootstrap 4网格列重叠[重复]
【发布时间】：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了

标签： html css bootstrap-4

【解决方案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标签重叠
当我减小屏幕尺寸时会发生这种情况