Как разместить последнюю строку Bootstrap внизу содержимого страницы

html css twitter-bootstrap

656 просмотра

1 ответ

Я использую Bootstrap, и я хочу разместить последний rowиз .containerвнизу содержимого страницы.

Первым делом я попробовал следующий код:

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      .highlight {
        border: 1px solid red;
      }

      .push-to-bottom {
        position: absolute;
        bottom: 30px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container highlight">
      <div class="row">
        <div class="col-md-12">
          <img src="http://placehold.it/500x500">
        </div>
      </div>
      <div class="row push-to-bottom text-center highlight">
        <div class="col-md-12">
          <button>Press me</button>
        </div>
      </div>
    </div>
  </body>
</html>

введите описание изображения здесь

Тем не менее, это не работает должным образом из-за position: absoluteсвойства - последняя строка ничего не знает о других элементах в DOM, поэтому она получает неправильную ширину и позиционирование.

Ну, я изменил этот код на следующее:

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      .highlight {
        border: 1px solid red;
      }

      .rel {
        position: relative;
      }

      .push-to-bottom {
        position: absolute;
        bottom: 30px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container highlight rel">
      <div class="row">
        <div class="col-md-12">
          <img src="http://placehold.it/500x500">
        </div>
      </div>
      <div class="row push-to-bottom text-center highlight">
        <div class="col-md-12">
          <button>Press me</button>
        </div>
      </div>
    </div>
  </body>
</html>

введите описание изображения здесь

Как видите, я добавил position: relativeсвойство к .containerэлементу, поэтому теперь width: 100%выполняю правильную работу, и наш элемент размещается .containerвизуально. Но у него все еще есть следующие проблемы:

  • Он не заботится о других rows, поэтому может перекрываться с содержимым других строк
  • Он до сих пор не размещен внизу страницы, не .containerединственный

Как я могу добиться такого поведения без жесткого определения высоты и ширины, как предлагается в других вопросах, связанных с этой проблемой?

Автор: FrozenHeart Источник Размещён: 08.11.2019 11:22

Ответы (1)


0 плюса

Вы можете использовать нижний колонтитул.

<footer id="footer" class="footer row">
        <div class="container">
        Your text or DOM here
        </div>
</footer>

CSS:

footer {
display: block;
bottom: 0px;
height: [depends by content]
right: 0%;
left: 0%;
position: fixed !important;
position: absolute;
top: expression((0-(footer.offsetHeight)+ (document.documentElement.clientHeight? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop? document.documentElement.scrollTop:document. body.scrollTop))+'px');
text-align: center;
visibility: visible;
}
Автор: tedebus Размещён: 03.12.2018 10:32
Вопросы из категории :
32x32