Как разместить кнопку ссылки рядом с div с помощью Bootstrap 4

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

У меня есть кнопка ссылки, которую мне нужно разместить справа от div. Добавление float-left в div и float-right на кнопку ссылки этого не делает. Что я делаю не так?

https://jsfiddle.net/3v2s4c50/

 <div class="container">
  <div class="row">
    <div class="col">
              <div class="card">
            <div class="card-header">Today and Tomorrow</div>
            <div class="card-body">
                    <div class="float-left">Someone somewhere is waiting for you.</div>
                    <a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
            </div>  
        </div>    
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
</div>

1. float — это не то, что вам нужно использовать в таких ситуациях, попробуйте разделить текст и кнопку с помощью row и col в bootstrap это работает

2. подход @keidakida row col позволяет кнопке ссылки занимать всю высоту столбца и делает кнопку больше, чем она должна быть.

3. Да, но вы можете ограничить высоту кнопки, это то же самое, что использовать display: flex вид

Ответ №1:

удалите символы с плавающей точкой и добавьте:

 .card-body{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

Ответ №2:

  <div class="card-body d-flex">
       <div class="flex-fill">Someone somewhere is waiting for you</div>
       <a role="button" href="google.com" class="flex-fill btn btn-primary"> Login</a>
  </div>

Ответ №3:

Что ж, он это делает. Но часть экрана, на которой отображаются результаты, недостаточно широка, чтобы отображать как div с текстом, так и кнопку в одной строке .. тогда это прерывается. Если вы измените текст на что-то меньшее, например, «Кто-то ждет», вы увидите, что кнопка плавает справа 🙂 Вы также можете установить фиксированную ширину для вашего текстового div (в настоящее время она расширяется в зависимости от содержимого).

 <div class="card-body">
                    <div class="float-left" style="width: 50%;">Someone somewhere is waiting for you</div>
                    <a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>

1. Спасибо, теперь я замечаю это в скрипте. Но в моем проекте это не сработало бы так же, вероятно, из-за ограничений родительского div. Другими словами, решение с плавающей точкой будет работать не во всех случаях. Я принял ответ, который исправил это.

2. рад, что вы это исправили, хотя 🙂

Ответ №4:

Вы можете добавить свою ссылку в div с любым классом. Затем добавьте стиль «text-align: right;» в свой div следующим образом:

 .my-link {
     text-align: right;
}

 .
<div class="my-link">
    <a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>
.

Я надеюсь, что это будет полезно.