Bootstrap, как сохранить среднюю строку всегда между строкой заголовка и строкой нижнего колонтитула - PullRequest
Новая
       14

Bootstrap, как сохранить среднюю строку всегда между строкой заголовка и строкой нижнего колонтитула

0 голосов
/ 15 сентября 2018

Я недавно добавил стили для img в этом отображении, которое у меня есть для max-height:100% and max-width:100%, которое казалось нормальным только с изображениями, но я понял, что если мой средний ряд (который может содержать один или два столбца рядом)имеет несколько изображений или изображение с текстом вокруг него, оно полностью выделяется из ряда при больших разрешениях.

Проблема в том, что эта страница отображает пользовательский контент на больших телевизорах и мониторах, поэтому на этом этапесредний ряд полностью вытолкнул нижний колонтитул, а среднее содержимое растянуто вниз.

Я не знаю, следует ли мне что-то делать со средним рядом (или div внутри с колонками для изображений)/ text) или что-то другое.

Все, что мне нужно сделать, это убедиться, что, если это одно большое изображение, несколько изображений, текст с изображением или какая-то другая комбинация, что оно помещается внутри верхней и нижней строк ввсе время.Я был бы в порядке, даже если бы это привело к тому, что мои столбцы оказались бы влево или вправо соответственно.

Вот скрипка: https://jsfiddle.net/vbuf0gwL/62/

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

Опять же, всегда должны быть видны верхний и нижний ряды, а средняя должна соответственно масштабироваться 

img {
  max-width: 100%;
  max-height: 90vh;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

.modal-lg {
  max-width: 80% !important;
}

.my-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
  background-color: #929292;
  color: white;
  text-align: center;
}

.my-container>.middle {
  flex-grow: 1;
  padding: 30px;
  background-size: cover;
}

.my-container>.middle>* {}

#clock {
  /*background-color:#333;*/
  font-family: sans-serif;
  font-size: 40px;
  text-shadow: 0px 0px 1px #fff;
  color: #fff;
}

#clock span {
  color: #fff;
  font-size: 40px;
  position: relative;
}

#date {
  margin-top: -10px;
  letter-spacing: 3px;
  font-size: 20px;
  font-family: arial, sans-serif;
  color: #fff;
}

.buttonContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
  <link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="src/ytv.css" type="text/css" rel="stylesheet" />

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
  <script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
  <script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>


</head>

<body>
  <div class="container-fluid my-container">
    <div class="row">
      <div class="col-lg-12" style="background-color:black">
        <p style="color:white">
          test
        </p>
      </div>
    </div>

    <div class="row middle" style="flex:1; ">
      <div class="col-lg-6 leftFifty" id="leftFifty">
        <div class="leftContent" style="background-color: white; border: dotted 1px black; ">
          <p>TEST</p>
          <img src="https://via.placeholder.com/1024x942" />
          <!-- This is the div that is clicked in to select an image -->
        </div>
      </div>
      <div class="col-lg-6 rightFifty" id="rightFifty">
        <div class="rightContent" style="background-color: white; border: dotted 1px black; ">
          <p>TEST</p>
          <img src="https://via.placeholder.com/1024x942" />
          <!-- This is the div that is clicked in to select an image -->
        </div>
      </div>
    </div>

    <div class="row ">
      <div class="col-lg-12" style="background-color:black">
        <p style="color:white">
          test
        </p>
      </div>
    </div>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 15 сентября 2018

Установите верхний и нижний колонтитулы на position: fixed; с атрибутами top и bottom, установленными на 0 соответственно.

...