Социальные значки не всплывают в правом нижнем углу нижнего колонтитула

Question

Я хочу, чтобы мои иконки социальных сетей плавали в правом нижнем углу моего нижнего колонтитула, а не в левом. Я использую float: right; по моему css но это только немного отступает слева.

Может кто-нибудь помочь?

footer {
    background: #444;
    padding: 15px;
}

.copy {
    color: #fff;
    text-align: center;
    font-family:"Exo", sans-serif;
    padding-top: 20px;
}

.smed i {
    color: #fff;
    font-size: 40px;
    margin: 10px;
    padding-top: 10px;
    float: right;
}

.smed i:hover {
    color: #ffa500;
}

<footer>
        <div class="row text-center">
            <div class="col-md-4 smed">
                <i class="fab fa-github"></i>
                <i class="fab fa-linkedin"></i>
                <i class="fab fa-medium"></i>
                <i class="fab fa-youtube"></i>
            </div>
            <div class="col-md-4">
                <p class="text-light copy">Copyright 2020 Bootstrap4</p>
            </div>
        </div>
    </footer>

Answer 1

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

К счастью, в BS4 есть класс справки для этого flex-row-reverse.

Просмотр в полном размере.

footer {
  background: #444;
  padding: 15px;
}

.copy {
  color: #fff;
  text-align: center;
  font-family: "Exo", sans-serif;
  padding-top: 20px;
}

.smed i {
  color: #f00;
  //font-size: 40px;
  margin: 10px;
  padding-top: 10px;
  float: right;
}

.smed i:hover {
  color: #ffa500;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<footer>
  <div class="row text-center flex-row-reverse">
    <div class="col-md-4 smed">
      <i class="fab fa-github">A</i>
      <i class="fab fa-linkedin">B</i>
      <i class="fab fa-medium">B</i>
      <i class="fab fa-youtube">D</i>
    </div>
    <div class="col-md-4">
      <p class="text-light copy">Copyright 2020 Bootstrap4</p>
    </div>
  </div>
</footer>

Answer 2

Можете ли вы попробовать это. столбец 'smed' сместился вниз, а затем увеличил ширину первого столбца

<footer>
        <div class="row text-center">
            <div class="col-md-8">
                <p class="text-light copy">Copyright 2020 Bootstrap4</p>
            </div>        
            <div class="col-md-4 smed">
                <i class="fab fa-github">1</i>
                <i class="fab fa-linkedin">2</i>
                <i class="fab fa-medium">3</i>
                <i class="fab fa-youtube">4</i>
            </div>
        </div>
</footer>

Answer 3

Эй, э-э-э, я не знаю, почему вы спросили об этом, для меня это работает (по крайней мере, в редакторе фрагментов кода stackoverflow). Иконки всплывают направо.

footer {
    background: #444;
    padding: 15px;
}

.copy {
    color: #fff;
    text-align: center;
    font-family:"Exo", sans-serif;
    padding-top: 20px;
}

.smed i {
    color: #fff;
    font-size: 40px;
    margin: 10px;
    padding-top: 10px;
    float: right;
}

.smed i:hover {
    color: #ffa500;
}

<footer>
        <div class="row text-center">
            <div class="col-md-4 smed">
                <i class="fab fa-github"></i>
                <i class="fab fa-linkedin"></i>
                <i class="fab fa-medium"></i>
                <i class="fab fa-youtube"></i>
            </div>
            <div class="col-md-4">
                <p class="text-light copy">Copyright 2020 Bootstrap4</p>
            </div>
        </div>
    </footer>