Question

我试图让我的显示形式（记录的MVC）正确布局，并在表单变小时“响应”。

主要布局有效，但随着表单变小，我无法将标签和数据放到正确的位置。

以下是我想要显示的三种模式......

这是我的标记......但它只是把所有东西都搞砸了。

<div class="row">
    <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-6">
                <label class="control-label">
                    Arrive Date
                </label>
            </div>
            <div class="col-xs-6">
                01-Jan-2016
            </div>
        </div>
    </div>

    <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-6">
                <label class="control-label">
                    Departure Date
                </label>
            </div>
            <div class="col-xs-6">
                02-Jan-2016
            </div>
        </div>
    </div>
</div>

失败的布局

Answer 1

试试这个：

<div class="row">
    <div class="col-xs-12 col-sm-6">
        <div class="row">
            <div class="col-xs-12  col-md-6">
                <label class="control-label">
                    Arrive Date
                </label>
            </div>
            <div class="col-xs-12  col-md-6">
                01-Jan-2016
            </div>
        </div>
    </div>

    <div class="col-xs-12  col-sm-6">
        <div class="row">
            <div class="col-xs-12  col-md-6">
                <label class="control-label">
                    Departure Date
                </label>
            </div>
            <div class="col-xs-12 col-md-6">
                02-Jan-2016
            </div>
        </div>
    </div>
</div>

工作jsfiddle： http://jsfiddle.net/7khespu1/

Answer 2

尝试

<div class="row">
    <div class="col-xs-12 col-sm-6">
        <div class="row">
            <div class="col-xs-12  col-sm-6">
                <label class="control-label">
                    Arrive Date
                </label>
            </div>
            <div class="col-xs-12  col-sm-6">
                01-Jan-2016
            </div>
        </div>
    </div>

    <div class="col-xs-12  col-sm-6">
        <div class="row">
            <div class="col-xs-12  col-sm-6">
                <label class="control-label">
                    Departure Date
                </label>
            </div>
            <div class="col-xs-12  col-sm-6">
                02-Jan-2016
            </div>
        </div>
    </div>
</div>

您可以通过https://getbootstrap.com/examples/grid/更好地使用我希望它对您有所帮助

Bootstrap响应布局不按要求流动

2 个答案: