Reputation: 321
I've attached two images to show how it was(and still is in Firefox) and how it is in Chrome. I made no changes to this code it just randomly started stacking wrong.
<div class="tab-content clearfix">
<div class="tab-pane active" id="1wheels">
<form method="POST" action="wheels.php">
<div class="heading">
<h1>Wheel search</h1>
</div>
<div class="col-sm-4" >
<h5>Wheel Diameter:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="diam">
<option value=''>SELECT</option>
<?php while ($row = mysqli_fetch_assoc($diamQuery)) : ?>
<option
value="<?php echo $row['diam']; ?>"><?php echo $row['diam']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="col-sm-4">
<h5>Wheel PCD (mm):</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="pcd">
<option value=''>SELECT</option>
<?php while ($row = mysqli_fetch_assoc($pcdResult)) : ?>
<option
value="<?php echo $row['pcd']; ?>"><?php echo $row['pcd']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="col-sm-4">
<h5>Wheel Studs:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="holes">
<option value=''>SELECT</option>
<?php while ($row = mysqli_fetch_assoc($studResult)) : ?>
<option
value="<?php echo $row['holes']; ?>"><?php echo $row['holes']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
<button type="submit" class="btn btn-default btn-sm btn-primary"><i
class="fa fa-pencil"></i> Search Now
</button>
</form>
</div>
<div class="tab-pane" id="2wheels">
<form id="fitment_search" action="wheels.php" method="GET">
<div class="heading">
<h1>Car search</h1>
</div>
<div class="col-sm-4">
<h5>Vehicle Make:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="make" onchange="get_model(this.value)">
<option value="make">SELECT</option>
<?php while ($row = mysqli_fetch_assoc($makeResult)) : ?>
<option
value="<?php echo $row['make']; ?>"><?php echo $row['make']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="col-sm-4">
<h5>Vehicle Model:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="model" id="fitment_model">
<option>SELECT</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="col-sm-4">
<h5>Wheel Diam:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="diam2">
<option value="diam2">SELECT</option>
<?php mysqli_data_seek($diamQuery, 0); ?>
<?php while ($row = mysqli_fetch_assoc($diamQuery)) : ?>
<option
value="<?php echo $row['diam']; ?>"><?php echo $row['diam']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
<button type="submit" class="btn btn-default btn-sm btn-primary"><i
class="fa fa-pencil"></i> Search Now
</button>
</form>
</div>
</div>
I've tried adding a row but this doesn't seem to help, I just can't understand why this has happened? it worked fine for months and suddenly today it started looking bizzare.
Upvotes: 0
Views: 38
Reputation: 94
Use the grid system within a container class. http://getbootstrap.com/css/#grid
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="tab-content clearfix">
<div class="tab-pane active" id="1wheels">
<form method="POST" action="wheels.php">
<div class="heading">
<h1>Wheel search</h1>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Wheel Diameter:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="diam">
<option value=''>SELECT</option>
<?php while ($row=m ysqli_fetch_assoc($diamQuery)) : ?>
<option value="<?php echo $row['diam']; ?>">
<?php echo $row[ 'diam']; ?>
</option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Wheel PCD (mm):</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="pcd">
<option value=''>SELECT</option>
<?php while ($row=m ysqli_fetch_assoc($pcdResult)) : ?>
<option value="<?php echo $row['pcd']; ?>">
<?php echo $row[ 'pcd']; ?>
</option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Wheel Studs:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="holes">
<option value=''>SELECT</option>
<?php while ($row=m ysqli_fetch_assoc($studResult)) : ?>
<option value="<?php echo $row['holes']; ?>">
<?php echo $row[ 'holes']; ?>
</option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<button type="submit" class="btn btn-default btn-sm btn-primary"><i class="fa fa-pencil"></i> Search Now
</button>
</form>
</div>
<div class="tab-pane" id="2wheels">
<form id="fitment_search" action="wheels.php" method="GET">
<div class="heading">
<h1>Car search</h1>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Vehicle Make:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="make" onchange="get_model(this.value)">
<option value="make">SELECT</option>
<?php while ($row=m ysqli_fetch_assoc($makeResult)) : ?>
<option value="<?php echo $row['make']; ?>">
<?php echo $row[ 'make']; ?>
</option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Vehicle Model:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="model" id="fitment_model">
<option>SELECT</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Wheel Diam:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="diam2">
<option value="diam2">SELECT</option>
<?php mysqli_data_seek($diamQuery, 0); ?>
<?php while ($row=m ysqli_fetch_assoc($diamQuery)) : ?>
<option value="<?php echo $row['diam']; ?>">
<?php echo $row[ 'diam']; ?>
</option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<button type="submit" class="btn btn-default btn-sm btn-primary"><i class="fa fa-pencil"></i> Search Now
</button>
</form>
</div>
</div>
</div>
</body>
</html>
Upvotes: 1