Question

我写了一个在桌面视图中看起来不错的引导程序表单。我想更改控件以在平板电脑和移动视图中获取整个宽度，并将标签左对齐：我写了一个媒体查询，但它没有做任何事情。任何指导

            <!DOCTYPE html>
 <html lang="en">
<head>
<meta charset="UTF-8">
<title>Search Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<style type="text/css">
.control-label{
padding-top:0px !important;
}

 .longselect{
max-width:550px;
}

.search_box{
max-width:450px;
}

.ddlyear,.ddlmonth{
max-width:100px;
}

.ddl_year{
max-width:150px;
}

.lblddlmonth{
max-width:65px;
}

.btn_search{
margin-right:20px;
}
.div_label{
text-align:right;
}

 @media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
 .col-xs-12.div_label{
text-align:left !important;
}

}

</style>
</head>
<body>
<div class="searchbox">
<div class="container">
<div class="search_row row">
    <div class="col-md-12 col-sm-12 col-xs-12 form-group">
        <div class="col-md-3 col-sm-12 col-xs-12 div_label">
            <label for="txtSearch">Search term(s):</label>
        </div>
        <div class="col-md-9 col-sm-12 col-xs-12">
    <input name="ctl00$ctl27$g_5ae23328_0351_4b1c_aed3_5844c87daeaa$ctl00$txtTitle" type="text" maxlength="50" id="ctl00_ctl27_g_5ae23328_0351_4b1c_aed3_5844c87daeaa_ctl00_txtTitle" class="form-control input-sm search_box" >            </div>
    </div>
</div>
<div class="row year_row">
    <div class="col-md-12 col-sm-12 col-xs-12 form-group">
        <div class="col-md-3 col-sm-12 col-xs-12 div_label">
            <label for="ddl_year">Year:</label>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-12 ddl_year">
            <select class="form-control input-sm ddlyear" id="ddl_year">
       <option>All</option>
       <option>2015</option>
    </select>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-12 div_label lblddlmonth">
            <label for="ddl_month">Month:</label>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-12">
            <select class="form-control input-sm ddlmonth" id="ddl_month">
        <option>All</option>
       <option>Janauary</option>
       <option>Feberuary</option>
       </select>
        </div>
    </div>
</div>
  <div class="row atoz_row">
    <div class="col-md-12 col-sm-12 col-xs-12 form-group">
        <div class="col-md-3 col-sm-12 col-xs-12 div_label">
            <label for="ddl_atoztopics">A-Z Topic:</label>
        </div>
        <div class="col-md-9 col-sm-12 col-xs-12">
            <select class="form-control input-sm longselect" id="ddl_atoztopics">
     <option>This is  atest</option>
     <option>This is  atest</option>
     <option>This is  atest</option>
     </select>
        </div>
    </div>
</div>
<div class="row orgunit_row">
    <div class="col-md-12 col-sm-12 col-xs-12 form-group">
        <div class="col-md-3 col-sm-12 col-xs-12 div_label">
            <label for="ddl_orgunit">Organizational Unit:</label>
        </div>
        <div class="col-md-9 col-sm-12 col-xs-12">
            <select class="form-control input-sm longselect" id="ddl_orgunit">
        <option>This is  atest</option>
       <option>This is  atest</option>
       <option>This is  atest</option>
       </select>
        </div>
      </div>
   </div>
<div class="row spotlights_row">
    <div class="col-md-12 col-sm-12 col-xs-12 form-group">
        <div class="col-md-3 col-sm-6 col-xs-6 div_label">
            <label for="chk_spotlights">Include Spotlights:</label>
        </div>
        <div class="col-md-9 col-sm-6 col-xs-6">
            <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-3 col-sm-0 col-xs-0 text-right">

        </div>
        <div class="col-md-9 col-sm-12 col-xs-12 text-left">
            <button class="btn btn-default btn_search">Search</button> 
            <button class="btn btn-default">Reset</button>  
        </div>
    </div>
  </div>
  </div>
  </div>
  </body>
  </html>

Bootstrap for Bootstrap Form

0 个答案: