Как поместить стрелки между разделами в одном ряду с помощью Twitter начальной загрузки 3? - PullRequest
Новая
       12

Как поместить стрелки между разделами в одном ряду с помощью Twitter начальной загрузки 3?

0 голосов
/ 04 июля 2018

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

Я добавил следующий html между полями, но он не дает ожидаемого эффекта, поскольку он перемещает все стрелки в одну сторону 

  <i class="glyphicon glyphicon-arrow-right"></i>

Смотрите мой код ниже: 

<html>

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <title></title>
  <style>
    .ibox {
      border-style: solid;
      border-color: black;

    }
  </style>
</head>

<body>

  <div class='container'>
    <div class="row">
      <div class="col-md-3">
        <div class='ibox'>
          <h2>Safari bug warning!</h2>
          <p class="text-danger">As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>
      <i class="glyphicon glyphicon-arrow-right"></i>
      <div class="col-md-3">
        <div class='ibox'>

          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>
      <i class="glyphicon glyphicon-arrow-right"></i>

      <div class="col-md-3">
        <div class='ibox'>
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>
      <i class="glyphicon glyphicon-arrow-right"></i>

      <div class="col-md-3">
        <div class='ibox'>
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

    </div>
  </div>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <!-- Minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

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

Id like to add these arrows between the boxes

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Я создал кодовое перо с вашим кодом, без тега i, я добавил значки на псевдоэлемент (: after), затем, скрывая от последнего элемента, вам, возможно, придется удалить их на небольшом экране. , Проверьте, поможет ли это вам CodePen здесь 

<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">


    <title></title>
    <style>
        .ibox {
            border-style: solid;
            border-color: black;

        }
.col-md-3:after {
      display: block;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
    content: "\f105";
  font-size: 20px;
    float: right;
    position: absolute;
    right: -5px;
    top: 100px;
    color: red;
}
.col-md-3:last-child:after {
  display:none;
}
    </style>
</head>
<body>

<div class='container'>
      <div class="row">
        <div class="col-md-3">
          <div class='ibox'>
          <h2>Safari bug warning!</h2>
          <p class="text-danger">As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
          </div>
        </div>
        <div class="col-md-3">
            <div class='ibox'>

          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
          </div>
        </div>

        <div class="col-md-3">
          <div class='ibox'>
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
          </div>
        </div>

        <div class="col-md-3">
          <div class='ibox'>
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
         </div>

      </div>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

Чтобы скрыть стрелки на маленьких экранах, вы можете использовать медиа-запросы, см. Ниже 

@media screen and (max-width: 991px) {
  .col-md-3:after {
    display: none;
  }
}

Это скроет стрелки на всех экранах до 991 пикселей.

0 голосов
/ 04 июля 2018

К сожалению, Bootstrap, похоже, не оказывает вам здесь большого влияния. По сути, значки шрифта должны быть в элементах .col-md-3, а затем вы можете добавить класс, чтобы сделать эти display:flex и избавиться от отступов по умолчанию.

Codepen 

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <title></title>
    <style>
        .ibox {
            border-style: solid;
            border-color: black;

        }
    .add-flex {
      display: flex;
      padding: 0;
    }
    .add-flex:last-of-type .ibox {
      width: calc(100% - 36px);
    }
    i.glyphicon{
      margin-top: 100px;
      color: red;
      font-size: 36px
    }
    </style>
</head>
<body>

<div class='container'>
      <div class="row">
        <div class="col-md-3 add-flex">
          <div class='ibox'>
          <h2>Safari bug warning!</h2>
          <p class="text-danger">As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
          </div>
              <i class="glyphicon glyphicon-chevron-right"></i>
        </div>

        <div class="col-md-3 add-flex">
            <div class='ibox'>

          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
          </div>
          <i class="glyphicon glyphicon-chevron-right"></i>
       </div>


        <div class="col-md-3 add-flex">
          <div class='ibox'>
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
          </div>
            <i class="glyphicon glyphicon-chevron-right"></i>
        </div>


        <div class="col-md-3 add-flex">
          <div class='ibox'>
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
         </div>

      </div>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...