Question

我的表格在全屏幕上看起来不错，但不适合手机。我使用了一些黑客来打破手机上的形式，但它没有很好的中心，我想知道什么是最好的练习bootstrap方法是在手机上很好地显示这个。我希望它在同一个地方打破，但在手机上正确居中。我怎样才能做到这一点？是否有引导方式告诉它在哪里打破？或者我是否需要使用子行（这似乎很难）。

http://www.bootply.com/123978（编辑：固定链接）您必须单击移动按钮才能看到它在bootply中的样子。

HTML：

<div class = "container">
    <div class = "row">
        <div class = "col-lg-8 col-lg-offset-2" id="cas_app">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Calculator
                </div>
                <div class="panel-body">
                    <form id = "cas_form" method="GET" action="Servlet">
                        <div class ="input-group date" id = "cas_input_row">
                            <input id = "cas_datepicker" type = "text" class="form-control" placeholder="mm/dd/yyyy" />
                            <button class="btn btn-default" type="button" id="cas_datebutton">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                            <div id = "cas_radios">
                                <input type="radio" name="operation" value="plus">plus<br>
                                <input type="radio" name="operation" value="minus">minus
                            </div>
                            <p class="visible-xs"><br><br></p>
                            <input name = "daystoaddorsubtract" type = "number" class="form-control" placeholder="#" id = "cas_text2"/>
                            <div id = "cas_radios">
                                <input type="radio" name="cal_or_work" value="calendar">calendar days<br>
                                <input type="radio" name="cal_or_work" value="work">work days
                            </div>
                        </div>
                        <div class = "row" id = "cas_buttons">
                            <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Calculate Dates!</button> 
                            <button type="reset" class="btn btn-default"><i class="glyphicon glyphicon-remove"></i> Reset</button>
                        </div>

                        <input id="month" name="month" value="" type="hidden"/>
                        <input id="day" name="day" value="" type="hidden"/>
                        <input id="year" name="year" value="" type="hidden"/>
                        <input id="formID" name="formID" value="ca_add_subtract" type="hidden"/>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div

＆GT;

CSS：

#cas_form {
    margin-top: 20px;
    text-align: center;

}

#cas_input_row {
    text-align: center;
    margin:0 auto;
    width: 450px;
}

#cas_datepicker {
    width: 110px;
    float: left;

}

#cas_datebutton {
    float: left;
}

#cas_radios {
    float: left;
    margin-top: -4px;
    margin-left: 20px;
    height: 40px;
    vertical-align: baseline;
    text-align: left;
}

#cas_text2 {
    margin-left: 20px;
    width: 70px;
    float: left;

}

#cas_buttons {
    margin-top: 20px;
}

#cas_results {
    text-align: center;
    border: solid 1px;
    padding: 20px;
}

#cas_startOver {
    margin-top: 20px;
    text-align: center;
}
#cas_form {
    margin-top: 20px;
    text-align: center;

}

#cas_input_row {
    text-align: center;
    margin:0 auto;
    width: 450px;
}

#cas_datepicker {
    width: 110px;
    float: left;

}

#cas_datebutton {
    float: left;
}

#cas_radios {
    float: left;
    margin-top: -4px;
    margin-left: 20px;
    height: 40px;
    vertical-align: baseline;
    text-align: left;
}

#cas_text2 {
    margin-left: 20px;
    width: 70px;
    float: left;

}

#cas_buttons {
    margin-top: 20px;
}

#cas_results {
    text-align: center;
    border: solid 1px;
    padding: 20px;
}

#cas_startOver {
    margin-top: 20px;
    text-align: center;
}

Answer 1

我看到了你的代码，这就是让它看起来很奇怪的原因

<p class="visible-xs"><br><br></p>

你需要为每个视口添加类，以便它能够很好地破解！

col-md-# col-xs-#

Answer 2

我用这个模板解决了它：

http://getbootstrap.com/css/#grid-nesting

如何让这个表单中断/转到某个地方的另一行用于twitter bootstrap中的手机？

2 个答案: