Добавьте центральную линию к сетке начальной загрузки, не мешая существующим макетам

Question

Добавьте центральную линию к сетке начальной загрузки, не мешая существующим макетам

-3

Я пытаюсь создать эффект, подобный этому, с белой линией и кругами, проходящими по центру одностраничного макета, используя bootstrap 3.

Я думал, что самый простой способ сделать это - иметь столбец md-col-6 работать по всему макету с правой границей. Однако это, очевидно, не так, как моя страница должна быть выложена, чтобы содержать мой контент, например, один элемент представляет собой центрированное изображение. Есть ли способ создать этот эффект быстро, не мешая моему существующему макету загрузочной сетки? В идеале было бы здорово, если бы был общий способ сделать это, возможно, накладывая еще одну сетку (не уверен, что это возможно). Если нет, вот образец моего макета:

<div class="container fullheight" >
  <div class="row text-center">
    <div class="col-sm-12">
      <h2>Title</h2>
      <h3 style="font-size:46px;">2012</h3>
    </div>
  </div>
  <div class="row width90">
    <div class="col-sm-5 col-md-7"></div>
    <div class="col-sm-7 col-md-5 right-fact">
      <h3>Tile</h3>
      <p>Description</p>
    </div>
  </div>
  <div class="row text-center"> <img src="Images/Image1.svg" alt="Image" height="450px"> </div>
  <div class="row width90">
    <div class="col-sm-7 col-md-5 left-fact">
      <h3>Title</h3>
      <p>Description</p>
    </div>
  </div>
</div>
<!-- A few repeats to create a onepage website effect -->

George Edwards 09 фев. 2016, в 19:34

Источник

1

Пожалуйста, отправьте соответствующий код. Мы даже не знаем, как выглядит ваш существующий макет / контент.
DPac 09 фев. 2016, в 18:16
0

@DPac Я отредактировал свой вопрос. Однако, если возможно, я действительно хотел чего-то общего, если оно существует, поэтому оно не зависит от содержимого моей страницы.
George Edwards 09 фев. 2016, в 21:33

Теги:

twitter-bootstrap

html

css

1 ответ

Ещё вопросы

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

Andrei Gheorghiu · Accepted Answer · 2016-02-09T23-38-00.000Z

Вот:

.middle-line {
  position: fixed;
  height: calc(80vh - 28px); 
  bottom: 0;
  width: 1px;
  left: 50%;
  
  background-color: black;
}
.middle-line:before {
  border: 5px solid black;
  
  width: 18px;
  height: 18px;

  display: block;
  content: '';
  bottom: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
}

<div class="middle-line"></div>

Не стесняйтесь менять цвет линии и круга, меняя два экземпляра black с CSS, если вы хотите другой цвет. Например, замена его на rgba(255,255,255,.85) сделает их белыми с непрозрачностью 85%. Вы также можете изменить размер круга и ширину рамки, пока не будете довольны результатом.

Не забудьте добавить html на свою страницу :). Он маленький, но важный. Вы можете разместить его где угодно внутри <body>, желательно как прямой ребенок.

Ура!