Блоки bootstrap с плавающей запятой вправо-влево

https://codepen.io/milo-boyd/pen/NzebMJ?page=1&

Как выровнять кнопку по левому краю, а изображение - по правому краю? HTML не изменится. Спасибо.

.button {
  float:right
}

.img {
  float:left
}

<div class = "container">
  <div class = "row">

  <div class = "col-md-6 text">
    <button type = "button" class = "btn btn-warning button">Warning</button>

  </div>

 <div class = "col-md-6 img">
   <img 
   src = "https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" 
   style = "width:100%"/>
  </div>
    
</div>
</div>

.button { float:right } .img { float:left }codepen.io/anon/pen/QxzdWw?page=1&

— 29.06.2018 11:13

Простите. Я неправильно написал вопрос. Я редактировал

— 29.06.2018 11:18

html css twitter-bootstrap

29.06.2018 11:05

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

726

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуй это

https://codepen.io/anon/pen/GGPNVw?editors=1100.

Без изменений в HTML.

.row {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  justify-content: space-between;
}

.text {
  float:left;
}

<div class = "container">
  <div class = "row">
    <div class = "col-md-6 img">
      <img src = "https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" style = "width:100%"/>
    </div>
  
    <div class = "col-md-6 text">
      <button type = "button" class = "btn btn-warning button">Warning</button>
    </div>    
</div>
</div>

@ tomclack Отредактировано. Используйте flex-box

— 29.06.2018 11:25

29.06.2018 11:13

Для этого не нужно писать внешний CSS. Bootstrap имеет свойства выравнивания. Просто используйте классы как - float-left и float-right. Взгляните на эту документацию - https://getbootstrap.com/docs/4.0/utilities/float/

<div class = "container">
  <div class = "row">
 <div class = "col-md-6 img">
   <img class = "float-left" src = "https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" style = "width:100%"/>
  </div>
  <div class = "col-md-6">
    <button type = "button" class = "btn btn-warning button float-right">Warning</button>

  </div>

</div>
</div>

Вы переместили изображение вправо, а кнопку - влево. А должно быть наоборот. :п

— 29.06.2018 11:23

29.06.2018 11:17