Как показать слайдер, встроенный в формы с помощью Bootstrap?

Question

У меня есть веб-сайт, на котором я хочу показать пример экрана приложения со встроенной формой.

Я попытался добавить следующий код в CSS ползунка:

display: inline-block; overflow: hidden; white-space: no-wrap;

, но безрезультатно.

Сайт сделан с использованием Bootstrap 4.0.Вы можете просмотреть его здесь: https://pao.sg/gowhere/index

Вот скриншот того, чего я хочу достичь:

Вся помощь приветствуется, спасибо!

Answer 1

В начальной загрузке вы можете использовать их сетку,

<div class="container-fluid">
  <div class="row">
    <div class="col-7">
      <!-- Your form -->
    </div>
    <div class="col-5">
      <!-- Slider -->
    </div>
  </div>
</div>

Answer 2

добавьте 'col-md-6' для формирования div и div с изображениями и измените col-md-7 на col-md-12.ниже приведен снимок экрана вывода

замените этот код на ваш

div class="col-xs-12 col-md-12 header-text">
                <h2>Travel Deals Over Messaging</h2>
                <p>Best Travel Deals over Facebook Messenger or WhatsApp.</p>
                <!-- Search form -->
              <div class="form-row col-md-4">
                <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>
                  <label for="exampleFormControlSelect1">Number of Travellers:</label>
                  <input type="number" class="form-control" placeholder="Enter the number of travellers">
                <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>
            <div class="hidden-xs hidden-sm col-md-8 text-right">
                <div class="screen-box screen-slider owl-carousel owl-theme owl-responsive--1 owl-center owl-loaded">





                <div class="owl-stage-outer"><div class="owl-stage" style="transition: all 0s ease 0s; width: 2178px; transform: translate3d(-726px, 0px, 0px);"><div class="owl-item cloned" style="width: 242px; margin-right: 0px;"><div class="item">
                        <img src="images/screen-4.jpg" alt="">
                    </div></div><div class="owl-item cloned" style="width: 242px; margin-right: 0px;"><div class="item">
                        <img src="images/screen-5.jpg" alt="">
                    </div></div><div class="owl-item animated owl-animated-out fadeOut" style="width: 242px; margin-right: 0px; left: 242px;"><div class="item">
                        <img src="images/pixel_very_silver_portrait.png" alt="">
                    </div></div><div class="owl-item animated owl-animated-in fadeIn active center" style="width: 242px; margin-right: 0px;"><div class="item">
                        <img src="images/screen-2.jpg" alt="">
                    </div></div><div class="owl-item" style="width: 242px; margin-right: 0px;"><div class="item">
                        <img src="images/screen-3.jpg" alt="">
                    </div></div><div class="owl-item" style="width: 242px; margin-right: 0px;"><div class="item">
                        <img src="images/screen-4.jpg" alt="">
                    </div></div><div class="owl-item" style="width: 242px; margin-right: 0px;"><div class="item">
                        <img src="images/screen-5.jpg" alt="">
                    </div></div><div class="owl-item cloned" style="width: 242px; margin-right: 0px;"><div class="item">
                        <img src="images/pixel_very_silver_portrait.png" alt="">
                    </div></div><div class="owl-item cloned" style="width: 242px; margin-right: 0px;"><div class="item">
                        <img src="images/screen-2.jpg" alt="">
                    </div></div></div></div><div class="owl-controls"><div class="owl-nav"><div class="owl-prev" style=""><i class="ti-arrow-left"></i></div><div class="owl-next" style=""><i class="ti-arrow-right"></i></div></div><div class="owl-dots" style=""><div class="owl-dot"><span></span></div><div class="owl-dot active"><span></span></div><div class="owl-dot"><span></span></div><div class="owl-dot"><span></span></div><div class="owl-dot"><span></span></div></div></div></div>
            </div>
        </div>

Answer 3

Удалите col-md-7 из класса, содержащего текст заголовка, и добавьте col-xs-6 к двум элементам div внутри (форма и изображение)

<div class="row v-center">
                <div class="col-xs-12 header-text">
                    <h2>Travel Deals Over Messaging</h2>
                    <p>Best Travel Deals over Facebook Messenger or WhatsApp.</p>
                    <!-- Search form -->
                  <div class="form-row **col-xs-6**">
                    ....
                </div>
                <div class="hidden-xs **col-xs-6** hidden-sm">
                   .....
                </div>
            </div>
        </div>