Вы неправильно используете форму-строку.Вы не вставили весь кодовый блок только частично.Поэтому я должен сделать некоторые предположения, например, упакован ли он в контейнер или в контейнер с жидкостью?Какой CSS вы используете?и т. д.
Если вы используете контейнерную жидкость, столбцы будут обернуты, чтобы занять правильное пространство, однако вам не следует полагаться на то, что начальный загрузчик разрабатывает макет, если вы действительно намерены включить элементы.другая строка.
Я использовал ваш код, и при его реализации я получаю следующее:
Как вы можете видеть числопутешественники раздавлены, но не выравнивают курс вправо, как в вашем примере.Подразумевая что-то еще в вашем коде, вы перемещаете его вправо (CSS или внешний HTML).Игнорирование этого и изменение вашего кода для правильного использования строк и столбцов приводит к намеченному выводу, не принимая во внимание CSS, конечно:
Сначала нам нужноразделить экран на два, один для формы и один для вашего изображения:
<div class='container-fluid'>
<div class='row'>
<div class='col-md-6'>
Your form goes here
</div>
<div class='col-md-6'>
Cell phone image here
</div>
</div>
</div>
Форма, которая находится внутри первого столбца, выглядит следующим образом:
<form>
</form>
Это должно иметьтри строки:
<form>
<div class="form-row">
</div>
<div class="form-row">
</div>
<div class="form-row">
</div>
</form>
Каждая строка будет иметь свои элементы или элементы группы форм:
<form>
<div class="form-row">
<div class="form-group">
Must be half the size col 6, must have a label and an input
</div>
<div class="form-group">
Must be half the size col 6, must have a label and an input
</div>
</div>
<div class="form-row">
<div class="form-group">
Must be the full row hence col 12, must have a label and an input
</div>
</div>
<div class="form-row">
Pattern continues.
</div>
</form>
Следовательно, ваш код должен выглядеть примерно так:
<div class='container-fluid'>
<div class='row'>
<div class='col-md-6'>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="travelFrom">Travelling from:</label>
<input
class="form-control"
type="text"
placeholder="Singapore"
readonly
/>
</div>
<div class="form-group col-md-6">
<label for="travelTo">Travelling to:</label>
<select class="form-control" id="to">
<option>Indonesia</option>
<option>Malaysia</option>
<option>Thailand</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Japan</option>
<option>Maldives</option>
<option>Others</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Number of Travellers:</label>
<input
type="number"
class="form-control"
placeholder="Enter the number of travellers"
/>
</div>
</div>
<div class="form-row">
<a href="https://m.me/weekendgowheresg" class="fb-msg-btn" target="_blank">
<img src="https://cdn.snaptravel.com/facebook-messenger-white.svg"
style="width:30px;height:30px"
alt="Facebook Messenger logo"/>Get Deal on Messenger</a>
<a href="https://wa.me/93900052" class="wa-msg-btn" target="_blank">
<img src="images/whatsapp.svg" style="width:30px;height:30px" alt="WhatsApp logo"/>Get Deal on WhatsApp</a>
</div>
</form>
</form>
<div class='col-md-6'>
Cell phone image here
</div>
</div>
Естественно, что этот контейнер-жидкость будет находиться в верхней части экрана, который вы можете исправить, используя гибкий макет или автоматические поля.