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

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%;

在输入组上使用..

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

<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 来隐藏中间的破折号。