Question

我有一个网站，希望在其中显示与我制作的表单内联的应用示例屏幕。

我尝试将以下代码添加到滑块的CSS中：

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

但无济于事。

该站点是使用Bootstrap 4.0创建的。您可以在这里查看它：https://pao.sg/gowhere/index

以下是我要实现的屏幕截图：

感谢所有帮助，谢谢！

Answer 1

从包含标题文本的类中删除col-md-7并将col-xs-6添加到内部的2个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>

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

在引导程序中，您可以使用其网格

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

如何使用Bootstrap显示与表单内联的滑块？

3 个答案: