Question

我尝试在我构建的网站中使用输入组。在col-md- *和col-lg- *中，它表现得很好。但是当它在col-xs- *时，它会像this

那样溢出容器

有人可以帮我解决这个问题吗？

代码：

<div class="row" style="border:1px solid #c1c1c1">
    <form>
        <div class="form-group col-xs-5 col-md-3" style="padding:8px;">
            <label for="dari">blah</label>
            <input type="date" class="form-control" id="dari"/>
        </div>
        <style>
            @media(min-width: 992px){
                .col-md-1.stripe{
                    width: 1%;
                }
            }
            .col-xs-1.stripe{
                width: 1%;
            }
        </style>
        <div class="form-group col-xs-1 col-md-1 stripe" style="margin-top:2em; padding:8px;">
            <p><strong>-</strong></p>
        </div>
        <div class="col-xs-5 col-md-3" style="padding:8px;">
            <label for="sampai">blah</label>
            <div class="input-group">
                <input type="date" class="form-control" id="sampai"/>
                <span class="input-group-btn">
                    <button class="btn btn-default">
                        <i class="glyphicon glyphicon-search"></i>
                        <span>&nbsp Search</span>
                    </button>
                </span>
            </div>
        </div>
    </form>
</div>

Answer 1

以下是一个示例，您可以使用

解决它

display: inline-block;
max-width: 100%;

使用input-group ..

在示例中，我在第二个输入组上添加了内联样式，您可以看到您和新内容之间的区别。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row" style="border:1px solid #c1c1c1"> 
  <div class="col-xs-7" style="border: 1px solid #ccc;"><div class="row">
    <form>
        <div class="form-group col-xs-5 col-md-3" style="padding:8px;">
            <label for="dari">blah</label>
            <input type="date" class="form-control" id="dari"/>
        </div>
        <style>
            @media(min-width: 992px){
                .col-md-1.stripe{
                    width: 1%;
                }
            }
            .col-xs-1.stripe{
                width: 1%;
            }
        </style>
        <div class="form-group col-xs-1 col-md-1 stripe" style="margin-top:2em; padding:8px;">
            <p><strong>-</strong></p>
        </div>
        <div class="col-xs-5 col-md-3" style="padding:8px;">
            <label for="sampai">blah</label>
            <div class="input-group">
                <input type="date" class="form-control" id="sampai"/>
                <span class="input-group-btn">
                    <button class="btn btn-default">
                        <i class="glyphicon glyphicon-search"></i>
                        <span>&nbsp Search</span>
                    </button>
                </span>
            </div>
            
            <div class="input-group" style="display: inline-block; max-width: 100%;">
                <input type="date" class="form-control" id="sampai"/>
                <span class="input-group-btn">
                    <button class="btn btn-default">
                        <i class="glyphicon glyphicon-search"></i>
                        <span>&nbsp Search</span>
                    </button>
                </span>
            </div>
        </div>
    </form>
    </div></div>
</div>

另外，我建议您在移动设备上使用col-xs-12表示更大的列，并使用hidden-xs隐藏其间的短划线。

如何修复col-xs- *中的bootstrap输入组溢出？

1 个答案: