Question

你能告诉我如何防止品牌选择框隐藏在日期后面。我给了日期的最小宽度，因为我不希望它们折叠超过最小宽度。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="col-md-12 row widget-simple remove-padding-top margin-bottom-10">
    <form accept-charset="UTF-8" method="post">
        <div style="margin:0;padding:0;display:inline">
            <input name="utf8" type="hidden" value="✓">
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-12">
                <div class="form-group credits-daterange">
                    <label class="col-sm-2 col-xs-12 control-label vertical-center" for="start_date">Date</label>
                    <div class="col-sm-10 col-xs-12">
                        <div class="input-group input-daterange" data-date-format="yyyy-mm-dd" style="min-width: 236px;">
                            <input class="form-control text-center" id="start_date" name="start_date" placeholder="From" required="required" type="text" value="2013-08-01"> <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>

                            <input class="form-control text-center" id="end_date" name="end_date" placeholder="To" required="required" type="text" value="2015-08-03">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-12">
                <div class="form-group">
                    <select class="form-control" id="brand" name="brand">
                        <option value="0">All Brands</option>
                        <option value="9618">Brand 1</option>
                        <option value="10268">Brand 2</option>
                        <option value="10232">Brand 3</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-12">
                <div class="form-group">
                    <select class="form-control" id="status" name="status">
                        <option value="Created">status 1</option>
                        <option value="Downloaded">Status 2</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2 col-sm-12 pull-right">
                <input class="hidden" id="search_txt" name="search_txt" type="text" value="">
                <input class="btn btn-primary" id="agencies-export-excel" name="commit" type="submit" value="Export to Excel">
            </div>
        </div>
    </form>
</div>

</body>
</html>

Demo

欢迎所有建议。

由于

Answer 1

重叠归因于style="min-width: 236px;

如果你删除它，你可以解决这个问题。

这是一个小提琴：http://www.bootply.com/KFgIJ6z5ld

没有自定义样式的代码：

<div class="col-md-12 row widget-simple remove-padding-top margin-bottom-10">
    <form accept-charset="UTF-8" method="post">
        <div style="margin:0;padding:0;display:inline">
            <input name="utf8" type="hidden" value="✓">
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-12">
                <div class="form-group credits-daterange">
                    <label class="col-sm-2 col-xs-12 control-label vertical-center" for="start_date">Date</label>
                    <div class="col-sm-10 col-xs-12">
                        <div class="input-group input-daterange" data-date-format="yyyy-mm-dd">
                            <input class="form-control text-center" id="start_date" name="start_date" placeholder="From" required="required" type="text" value="2013-08-01"> <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>

                            <input class="form-control text-center" id="end_date" name="end_date" placeholder="To" required="required" type="text" value="2015-08-03">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-12">
                <div class="form-group">
                    <select class="form-control" id="brand" name="brand">
                        <option value="0">All Brands</option>
                        <option value="9618">Brand 1</option>
                        <option value="10268">Brand 2</option>
                        <option value="10232">Brand 3</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-12">
                <div class="form-group">
                    <select class="form-control" id="status" name="status">
                        <option value="Created">status 1</option>
                        <option value="Downloaded">Status 2</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2 col-sm-12 pull-right">
                <input class="hidden" id="search_txt" name="search_txt" type="text" value="">
                <input class="btn btn-primary" id="agencies-export-excel" name="commit" type="submit" value="Export to Excel">
            </div>
        </div>
    </form>
</div>

另一种方法是让你的细胞更大：

Bootply ：http://www.bootply.com/KzRD6fb0Pw

代码：

<div class="col-md-12 row widget-simple remove-padding-top margin-bottom-10">
    <form accept-charset="UTF-8" method="post">
        <div style="margin:0;padding:0;display:inline">
            <input name="utf8" type="hidden" value="✓">
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="form-group credits-daterange">
                    <label class="col-sm-2 col-xs-12 control-label vertical-center" for="start_date">Date</label>
                    <div class="col-sm-10 col-xs-12">
                        <div class="input-group input-daterange" data-date-format="yyyy-mm-dd">
                            <input class="form-control text-center" id="start_date" name="start_date" placeholder="From" required="required" type="text" value="2013-08-01"> <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>

                            <input class="form-control text-center" id="end_date" name="end_date" placeholder="To" required="required" type="text" value="2015-08-03">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-2 col-xs-12">
                <div class="form-group">
                    <select class="form-control" id="brand" name="brand">
                        <option value="0">All Brands</option>
                        <option value="9618">Brand 1</option>
                        <option value="10268">Brand 2</option>
                        <option value="10232">Brand 3</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3 col-sm-2 col-xs-12">
                <div class="form-group">
                    <select class="form-control" id="status" name="status">
                        <option value="Created">status 1</option>
                        <option value="Downloaded">Status 2</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3 col-sm-2 pull-right">
                <input class="hidden" id="search_txt" name="search_txt" type="text" value="">
                <input class="btn btn-primary" id="agencies-export-excel" name="commit" type="submit" value="Export to Excel">
            </div>
        </div>
    </form>
</div>

防止Bootstrap列重叠

1 个答案: