我有这个问题，当我把浏览器(Chrome和Firefox)的屏幕尺寸缩小到移动视图时，我的引导按钮变得不可点击。这个问题只会在运行服务器上测试脚本时出现。在我的本地主机上，这个按钮没有问题。
这是代码:
<?php
$sql2 = "SELECT i.*, m.*, c.*, i.id AS id_count FROM offers i
JOIN members m ON m.id = i.member_id JOIN offer_count c ON i.id = c.offer_id
WHERE school = :school ORDER BY i.id DESC LIMIT $start_from, 6 ";
foreach ($db->query($sql2, array('school' => $_GET['school'])) AS $result){
<div class='col-xs-10 col-sm-10 col-md-10'>
<div class='user_sec_fav'>
<div class='row'>
<div class='col-md-4'>
";
foreach ($db->query($view_photo, array( 'offer_id' => $result['id_count'])) AS $result2){
echo " <img src='profile_pix/{$result2['photo']}' class='img-responsive' width = '300px' height ='' style=' '/>";
} echo"
</div>
<div class='col-md-6'>
<a href='readmore.php?id={$result['id_count']}' class='btn btn-success' style=''>Details</a>
</div>
</div>
</div>
</div>
}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--<script src="https://code.jquery.com/jquery.js"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<script>
$('#confirm-delete').on('show.bs.modal', function(e) {
$(this).find('.danger').attr('', $(e.relatedTarget).data('href'));
});
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yyyy' });
});
</script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand home_logo" href="index.php">Offcampus<span class="home_logo_small">.com.ng</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right"><!-- home_menu-->
<!--</ul>-->
<!--<ul class="nav navbar-nav navbar-right">-->
<li><a href='login.php?location=%2Fhome.php%3Fschool%3DUniversity%2Bof%2BLagos%26accommodation%3Dsee%2Ball%26price%3Dsee%2Ball%26submit%3DSearch' class=''>Login</a></li> </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Offcampus.com.ng</title>
</head>
<body>
<div class='container'>
<div class = ''>
<div class='col-xs-12 col-md-9 col-sm-9 '>
<div class='col-xs-10 col-sm-10 col-md-10'>
<div class='user_sec_fav'>
<div class='row'>
<div class='col-md-4'>
<img src='profile_pix/0_1443351862.jpg' class='img-responsive' width = '300px' height ='' style=' '/>
</div>
<div class='col-md-6'>
<a href='readmore.php?id=112' class='btn btn-success' style=''>Details</a>
</div>
</div>
</div>
</div>
<div class='col-xs-10 col-sm-10 col-md-10'>
<div class='user_sec_fav'>
<div class='row'>
<div class='col-md-4'>
<img src='profile_pix/0_1443351689.jpg' class='img-responsive' width = '300px' height ='' style=' '/>
</div>
<div class='col-md-6'>
<a href='readmore.php?id=111' class='btn btn-success' style=''>Details</a>
</div>
</div>
</div>
</div>
<div class='col-xs-10 col-sm-10 col-md-10'>
<div class='user_sec_fav'>
<div class='row'>
<div class='col-md-4'>
<img src='profile_pix/0_1443351518.jpg' class='img-responsive' width = '300px' height ='' style=' '/>
</div>
<div class='col-md-6'>
<a href='readmore.php?id=109' class='btn btn-success' style=''>Details</a>
</div>
</div>
</div>
</div>
<div class='col-xs-10 col-sm-10 col-md-10'>
<div class='user_sec_fav'>
<div class='row'>
<div class='col-md-4'>
<img src='profile_pix/0_1443351378.jpg' class='img-responsive' width = '300px' height ='' style=' '/>
</div>
<div class='col-md-6'>
<a href='readmore.php?id=107' class='btn btn-success' style=''>Details</a>
</div>
</div>
</div>
</div>
<div class='col-xs-10 col-sm-10 col-md-10'>
<div class='user_sec_fav'>
<div class='row'>
<div class='col-md-4'>
<img src='profile_pix/0_1443351185.jpg' class='img-responsive' width = '300px' height ='' style=' '/>
</div>
<div class='col-md-6'>
<a href='readmore.php?id=105' class='btn btn-success' style=''>Details</a>
</div>
</div>
</div>
</div>
<div class='col-xs-10 col-sm-10 col-md-10'>
<div class='user_sec_fav'>
<div class='row'>
<div class='col-md-4'>
<img src='profile_pix/0_1443350953.jpg' class='img-responsive' width = '300px' height ='' style=' '/>
</div>
<div class='col-md-6'>
<a href='readmore.php?id=103' class='btn btn-success' style=''>Details</a>
</div>
</div>
</div>
</div>
<div class='col-md-12 text-center'>
<ul class='pagination pag'><li class='active' ><a href="home.php?school=University of Lagos&accommodation=see all&price=see all&submit=Search&page=1">1</a></li><li><a href="home.php?school=University of Lagos&accommodation=see all&price=see all&submit=Search&page=2">2</a></li></ul></div></div><div class='col-xs-12 col-md-3 col-sm-3 con_1'>
<form class='form-horizontal home_form' role='form' method='get' action='home_2.php'>
<div class='form-group'>
<span class='home_text_2'>Your School</span><br class='clear'>
<select name='school' class='form-control input-3x ' id=''>
<option value='select' >select....</option>
<option value='University of Benin'>University of Benin</option>
<option value='University of Lagos'selected>University of Lagos</option>
<option value='Yaba College of Technology'>Yaba College of Technology</option>
</select>
</div>
<div class='form-group'>
<span class='home_text_2'>Accommodation</span><br class='clear'>
<select name='accommodation' id='accommodation' class='form-control input-3x'>
<option value='' >Accommodation Type</option>
<option value='one room'>One Room</option>
<option value='one room self-contain' >One Room Self-Contain</option>
<option value='room and parlor' >Room and Parlour</option>
<option value='2 bedroom flat'>2 Bedroom Flat</option>
<option value='3 bedroom flat'>3 Bedroom Flat</option>
<option value='see all' selected>See All</option>
</select>
</div>
<div class='form-group'>
<span class='home_text_2'>Budget</span><br class='clear'>
<select name='price' id='price' class='form-control input-3x'>
<option value='' >Price Range.</option>
<option value='0-50,000' >0 - 50,000</option>
<option value='50,000-100,000' >50,000 - 100,000</option>
<option value='100,000-150,000' >100,000 - 150,000</option>
<option value='150,000-200,000' >150,000 - 200,000</option>
<option value='200,000 and above' >200,000 and above</option>
<option value='see all' selected>See All</option>
</select>
</div>
<div class='form-group'>
<span class='home_text_2'>Exact Location</span><br class='clear'>
<input type='text' name='location' placeholder='e.g. Dim Gate, Staff Quarters,' class='home_select_box_2'>
</div>
<div class='form-group'>
<span class='home_text_2'>Distance to School</span><br class='clear'>
<input type='radio' name='distance' value='near' checked>Near
<input style='' type='radio' name='distance' value='far'>Far
</div>
<div class='form-group'>
<span class='home_text_2'>Water Source</span><br class='clear'>
<input type='radio' name='water' value='tap'>Borehole
<input style='margin-left:5px;' type='radio' name='water' value='well'>Well
<input style='margin-left:5px;' type='radio' name='water' value='both' checked>Both
</div>
<div class='form-group'>
<span class='home_text_2'>Distance to a business centre (Photocopy, Typing, Cybercafe, etc)</span><br class='clear'>
<input type='radio' name='business' value='near' checked>Near
<input style='margin-left:5px;' type='radio' name='business' value='far'>Far
</div>
<div class='form-group'>
<input type='submit' name='submit' value='Refine search' class='btn btn-success' style=' '>
</div>
<div class='form-group find_school'>
Can't find what you looking for? <a href='post_request.php' class=''>Post a Request</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
在PHP文件中修改如下:
<div class='col-xs-10 col-sm-10 col-md-10'>
<div class='user_sec_fav'>
:
<div>
<div class='user_sec_fav'>