Неправильный текст столбца справа

Question

Я сделал гибкую колонку, но стрелка справа не правильная, и она скрыта. Она должна быть похожа на стрелку влево и указывать влево.

Левая сторона, которую я использую left: 0; Правая сторона, которую я использую right: 0; Я не могу понять, почему правая сторона неправильна

https://jsfiddle.net/wa04ytLn/2/

.row {
  background: #f8f9fa;
  margin: 50px 0 0 0;
}

.col {
  border: solid 1px #6c757d;
  padding-top: 200px;
}

#arleft {
  width: 5px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  height: 100%;
  cursor: pointer;
  align-items: flex-end;
}

#arright {
  width: 5px;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  height: 100%;
  cursor: pointer;
  align-items: flex-end;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <div id="cleft" class="col-3 col-xs-12 bg-info">
    collapse left
  </div>
  <div id="cmid" class="col col-xs-12">
    <div class="d-none d-md-flex" id="arleft">
      <i class="fa fa-arrow-right" aria-hidden="true"></i>
    </div>
    <div class="d-none d-md-flex" id="arright">
      <i class="fa fa-arrow-left" aria-hidden="true"></i>
    </div>
  </div>
  <div id="cright" class="col-3 col-xs-12 bg-info">
    collapse right
  </div>
</div>

Answer 1

попробуйте перевернуть строку

Добавьте этот код в css коде, все будет так, как вы хотите.

#arright {
  width: 5px;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  height: 100%;
  cursor: pointer;
  align-items: flex-end;

  /* add row-reverse */
  flex-direction: row-reverse;
}

Answer 2

Используйте flex-row-reverse класс, который обеспечивает bootstrap 4.

https://jsfiddle.net/qf5r18ca/

<div class="d-none d-md-flex flex-row-reverse" id="arright">
  <i class="fa fa-arrow-left" aria-hidden="true"></i>
</div>

Answer 3

Добавление «right: 0» только помещает красную линию в правую сторону от div. Если мы возьмем этот код, мы увидим, что происходит.

Как вы можете видеть, стрелка расположена аналогично левой красной линии. Если вы хотите, чтобы колонка начиналась справа. Вы можете использовать «flex-direction: row-reverse;»

И это даст вам желаемый результат.

<div class="row">
  <div id="cleft" class="col-3 col-xs-12 bg-info">
    collapse left
  </div>
  <div id="cmid" class="col col-xs-12">
    <div class="d-none d-md-flex" id="arleft">
      <i class="fa fa-arrow-right" aria-hidden="true"></i>
    </div>
    <div class="d-none d-md-flex" id="arright">
      <i class="fa fa-arrow-left" aria-hidden="true"></i>
    </div>
  </div>
  <div id="cright" class="col-3 col-xs-12 bg-info">
    collapse right
  </div>
</div>

__

.row {
  background: #f8f9fa;
  margin: 50px 0 0 0;
}

.col {
  border: solid 1px #6c757d;
  padding-top: 200px;
}

#arleft {
  width: 5px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  height: 100%;
  cursor: pointer;
  align-items: flex-end;
}

#arright {
  width: 5px;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  height: 100%;
  cursor: pointer;
  align-items: flex-end;
  flex-direction: row-reverse;
}

Вот jsFiddle: https://jsfiddle.net/bzry4Ltg/

Answer 4

Можете ли вы попробовать добавить следующие css к стрелке вправо?

.fa-arrow-left {
  position: absolute;
  right: 0;
}

Ссылка - https://jsfiddle.net/3trmdkfg/