Question

h1标签与表格重叠，有人有解决方案吗？我使用了12列，但仍然重叠。

＆＃13;

.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;
}

＆＃13;

    <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>

＆＃13;

Answer 1

似乎工作得更好一点，删除.search-style并设置col-md-4而不是col-xs-4。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

标题跨越整个页面的原因是因为类：

.headerH1Style {
  width: 100%;
}

当您将类设置为＆＃34; col-xs-4 headerH1Style＆＃34;时，css首先读取col-xs-4的宽度，然后使用headerH1Style的width属性覆盖它。

简单地删除宽度：100％属性应该使col-xs-4类正常运行。

编辑：浮动：左边应该使表单对象内联。 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>

引导4个网格列重叠

2 个答案: