Bootstrap реагирует на вертикальную шкалу времени с иконками и заполнителями изображений

Question

Bootstrap реагирует на вертикальную шкалу времени с иконками и заполнителями изображений

-4

Мне нужна помощь для достижения вертикальной шкалы времени с значками и заполнителями в соответствии с изображением.

Я использую фрагмент кода здесь, но я не могу преодолеть дизайн временной шкалы с помощью CSS3.

Цените помощь.

Fab 31 май 2016, в 18:11

Источник

0

@ Paulie-D Учебное пособие не поможет мне создать четверть кругов с помощью css и внедрить их в список.
Fab 31 май 2016, в 15:57
0

Так что это единственная проблема ... границы квартала? Вы должны быть более конкретными.
Paulie_D 31 май 2016, в 16:00
0

Вы хотите, чтобы Поли тоже все это кодировала?
Adam Buchanan Smith 31 май 2016, в 16:01
0

Да, как уже упоминалось в моем вопросе, проблема, которую я нахожу, состоит в том, чтобы создать дизайн вертикальной временной шкалы с помощью css, поскольку вершина, которая сделана из списков, является сплошной и удаляет границы четверть круга.
Fab 31 май 2016, в 16:04
0

Поэтому, возможно, вам следует отредактировать вопрос, чтобы объяснить, что именно вы ищете, и что вы пытались сделать, чтобы решить его. На данный момент это просто неопределенный вопрос запроса кода. Кроме того, поиск по SO, вероятно, обнаружит, что это произошло раньше.
Paulie_D 31 май 2016, в 16:06

Показать ещё 3 комментария

Теги:

twitter-bootstrap

html

css

css3

twitter-bootstrap-3

2 ответа

0

 .glyphicon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(-50%, -50%);
}

TOM 31 май 2016, в 17:06

Ещё вопросы

@ Paulie-D Учебное пособие не поможет мне создать четверть кругов с помощью css и внедрить их в список.
Так что это единственная проблема ... границы квартала? Вы должны быть более конкретными.
Вы хотите, чтобы Поли тоже все это кодировала?
Да, как уже упоминалось в моем вопросе, проблема, которую я нахожу, состоит в том, чтобы создать дизайн вертикальной временной шкалы с помощью css, поскольку вершина, которая сделана из списков, является сплошной и удаляет границы четверть круга.
Поэтому, возможно, вам следует отредактировать вопрос, чтобы объяснить, что именно вы ищете, и что вы пытались сделать, чтобы решить его. На данный момент это просто неопределенный вопрос запроса кода. Кроме того, поиск по SO, вероятно, обнаружит, что это произошло раньше.

Paulie_D · Accepted Answer · 2016-05-31T16-24-00.000Z

Кажется, что проблема заключается в том, что вы хотите.

Это может быть достигнуто путем установки простого поворотного преобразования на элементе и последующего вращения любого содержимого обратно.

Затем цвета границы можно установить индивидуально.

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  text-align: center;
}
div {
  display: inline-block;
  padding: 1em;
  border-style: solid;
  border-width: 2px;
  border-color: grey transparent;
  margin: 1em;
  border-radius: 50%;
  transform: rotate(45deg);
  font-size: 36px
}
div i {
  transform: rotate(-45deg);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <i class="fa fa-suitcase"></i>
</div>

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