Twitter bootstrap 在twitter引导中，我如何使此表单在某个位置中断/转到另一行的手机？

我有一个表格，在全屏上看起来不错，但不适合手机。我用了一点技巧在手机上破坏了表单，但它没有很好地居中，我想知道在手机上实现这种显示的最佳实践引导方法是什么。我希望它在同一个地方断裂，但在电话上正确居中。我该怎么做？有没有一种引导方法可以告诉它在哪里中断？或者我需要使用子行（这似乎很难）

（编辑：固定链接） 您必须单击移动按钮才能查看它在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

---

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

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

---

我用这个模板解决了这个问题：

---

谢谢。当我添加xs列时，我遇到了一个问题，它甚至在大屏幕上破坏了它。为什么大屏幕不忽略xs列？我也在测试，但没有用！但你需要尝试一下，也许还需要一些补偿

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

col-md-# col-xs-#