Bootstrap 4 набора элементов в одной строке

Question

Я хочу установить ссылки в одну строку внизу, например «Ссылка 1 слева внизу», «Ссылка 2 внизу центра», «Ссылка 3 справа внизу», но «Ссылка 2» не центрируется на ПК и мобильных устройствах.

HTML:

            <div>
                <a id="contact" href="/contact">Link 1</a>
                <a id="link" href="/repo">Link 2</a>
                <a id="api" href="/json">Link 3</a>
            </div>

CSS:

#contact{
    float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

#api{
    float: right;
    font-size: 20px;
    padding-top: 0.17em;
}

#link{
    display: inline;
    font-size: 30px;
    padding-right: 2.5%;
}

Как это выглядит сейчас

Answer 1

Используйте d-flex http://getbootstrap.com/docs/4.1/utilities/flex/

1. flex-md-row : для отображения встроенных данных для средних и больших устройств

2. flex-column : для отображения в колонке на мобильных устройствах

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex flex-md-row flex-column justify-content-between text-center">
  <a id="contact" href="/contact">Link 1</a>
  <a id="link" href="/repo">Link 2</a>
  <a id="api" href="/json">Link 3</a>
</div>

Answer 2

Используйте этот код:

Это делает div в нижней части: (как вы сказали: left bottom ...)

position: fixed;
bottom: 0;
width: 100%;

div{
text-align: center; 
    position: fixed;
    bottom: 0;
    width: 100%;
}
#contact{
   float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

#api{
    float: right;
    font-size: 20px;
    padding-top: 0.17em;
}

#link{
    font-size: 30px;
    padding-right: 2.5%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div>
<a id="contact" href="/contact">Link 1</a>
<a id="link" href="/repo">Link 2</a>
<a id="api" href="/json">Link 3</a>
 </div>

Answer 3

Удалите весь код CSS и используйте d-flex и justify-content-* для контейнера.

Используйте утилиты justify-content для контейнеров flexbox, чтобы изменить выравнивание элементов flex на главной оси (начальная ось x, если столбец flex-direction: столбец).Выберите из начала (браузер по умолчанию), конец, центр, между или вокруг.- Bootstrap

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
  <a id="contact" href="/contact">Link 1</a>
  <a id="link" href="/repo">Link 2</a>
  <a id="api" href="/json">Link 3</a>
</div>

Answer 4

Вы можете использовать начальную загрузку в классах d-flex и justify-content-between, чтобы легко достичь этого.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="d-flex justify-content-between">
  <a id="contact" href="/contact">Link 1</a>
  <a id="link" href="/repo">Link 2</a>
  <a id="api" href="/json">Link 3</a>
</div>

Answer 5

Вы можете сделать это так:

div {
    text-align: center;
}
#contact{
    float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

#api{
    float: right;
    font-size: 20px;
    padding-top: 0.17em;
}

#link {
    padding-top: 0.17em;
    font-size: 30px;
}

<div>
    <a id="contact" href="/contact">Link 1</a>
    <a id="link" href="/repo">Link 2</a>
    <a id="api" href="/json">Link 3</a>
</div>

Answer 6

Используя Bootstrap 4, вы можете сделать это следующим образом.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" >

<ul class="nav d-flex justify-content-between">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 3</a>
  </li>
</ul>

для более: https://getbootstrap.com/docs/4.1/components/navs/