Bootstrap 4 перекрытия столбцов сетки

Тег 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>

Источник

2 ответа

Кажется, работает немного лучше, удаляя .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>

Источник

Причина, по которой заголовок охватывает всю страницу, заключается в том, что класс:

.headerH1Style {
  width: 100%;
}

Когда вы устанавливаете свой класс как "col-xs-4 headerH1Style", css сначала читает ширину col-xs-4, а затем переопределяет ее свойством width в headerH1Style.

Простое удаление свойства 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>
Источник
Другие вопросы по тегам