Question

我刚刚开始学习bootstrap，我有点陷入困境。表格看起来可以平板电脑查看，然后谈到手机看起来很糟糕。

我需要添加的任何帮助，以使其在手机上看起来也很好。

我在js小提琴中创建了一个表单这是html代码

＆＃13;

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<title>Search Form</title>
    <style type="text/css">
    .search {
        max-width:800px;
        margin:10px;
    }
    </style>
     </head>
    <body>
    <div class="search">
        <form class="form-horizontal">
            <div class="control-group">
                <div class="controls form-inline">
                    <label class="col-xs-3 text-right" for="txtSearch">Search term(s):</label>
                    <input class="col-xs-9" type="text" id="txtSearch">
                    <br>
                    <br>
                    <label class="col-xs-3 text-right" for="ddl_year">Year:</label>
                    <select class="col-xs-3" id="ddl_year"></select>
                    <label class="col-xs-3 text-right" for="ddl_month">Month:</label>
                    <select class="col-xs-3" id="ddl_month"></select>
                    <br>
                    <br>
                    <label class="col-xs-3 text-right" for="ddl_atoztopics">Birth Country:</label>
                    <select class="col-xs-9" id="ddl_atoztopics"></select>
                    <br>
                    <br>
                    <label class="col-xs-3 text-right" for="ddl_orgunit">Education Level:</label>
                    <select class="col-xs-9" id="ddl_orgunit"></select>
                    <br>
                    <br>
                    <label class="col-xs-3 text-right" for="chk_spotlights">Include Gender:</label>
                    <input class="col-xs-0" id="chk_spotlights" type="checkbox">
                    <br>
                    <br>
                    <div class="col-xs-12 ">
                     <button class="col-xs-2" type="submit" id="btn_search" style=" margin-left: 200px;">Search</button>
                  <div class="col-xs-1"></div>
                     <button class="col-xs-2" type="submit" id="btn_reset">Reset</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>

</html>

＆＃13;

https://jsfiddle.net/DTcHh/11978/

Answer 1

您忘记添加<div class="container">并且也避免使用<br>，而是使用<div class="row">。此外，col-sm-*等类应该放在行内的<div>上。我正确地使用Bootstrap的类重写了你的表单，现在在所有设备上看起来都很好。

<div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="txtSearch">Search term(s):</label>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <input class="form-control input-sm" type="text" id="txtSearch">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="ddl_year">Year:</label>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                <select class="form-control input-sm" id="ddl_year"></select>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="ddl_month">Month:</label>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                <select class="form-control input-sm" id="ddl_month"></select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="ddl_atoztopics">Birth Country:</label>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <select class="form-control input-sm" id="ddl_atoztopics"></select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="ddl_orgunit">Education Level:</label>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <select class="form-control input-sm" id="ddl_orgunit"></select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="chk_spotlights">Include Gender:</label>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <input id="chk_spotlights" type="checkbox">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                <button class="btn btn-default">Search</button> 
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6 text-left">
                <button class="btn btn-default">Reset</button>  
            </div>
        </div>
    </div>
</div>

有关详细信息和示例，请查看Bootstrap's Docs

手机引导表单

1 个答案: