Question

使用标准的Bootstrap 3框架。它在PC浏览器上看起来很好（见下面的截图），但午餐复选框会显示滚动条。然而，在我的手机上，输入框覆盖整个宽度，复选框位于屏幕右侧。

有谁知道如何让所有3个元素出现在同一行，并调整自己以适应宽度的正确大小？

另外，为什么元素没有任何边距？

    <div class='row'>
    <div class='col-sm-12'>
        <div class="form-group flex">
            <div class="col-sm-3 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text' value='07:00' class="form-control fraTimepicker">
                </div>
            </div>
            <div class="col-sm-3 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text' value='15:00' class="form-control tilTimepicker">
                </div>
            </div>
            <div class="col-sm-6 form-group">
                <div class="input-group">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn active">
                            <input type="checkbox" id="lunchCheckbox">
                            <i class="fa fa-square-o fa-2x"></i>
                            <i class="fa fa-check-square-o fa-2x"></i><span>Lunch?</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.flex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around
}
</style>

Answer 1

我相信你正在使用bootstrap column和css flex。如果你依靠自举3，请不要将它与flex混合。 Flex将始终强制布局保持一行。

尝试移除flex并使用div＆＃34; container＆＃34; div包装行。或＆＃34;容器流体＆＃34;

使用col-xs-3类而不是col-sm-3也会将列保留在移动布局中。

<div class="container-fluid">
   <div class="row">
      <div class="col-xs-4"> </div>
      <div class="col-xs-4"> </div>
      <div class="col-xs-4"> </div>
   </div>
</div>

如果这不能解决您的问题，您必须使用媒体查询，并且必须为内部元素定义最大宽度/宽度。

但最好是利用移动设备的全宽度每行堆叠一个元素，以避免溢出，并且还可以提供更好的用户体验。

使多个输入对象适合内联而不包裹/水平滚动条

1 个答案: