theHussle
Reputation: 321
Bootstrap is being spastic out of nowhere and works fine on Firefox?
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
Answers (1)
Alexander Køpke
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
Related Questions
- Why did simply loading bootstrap into my document screw up my page?
- Weird Error on bootstrap
- Bootstrap Responsible glitch?
- Bootstrap/CSS Div Messing up CSS
- css and bootstrap issues in firefox
- Why does Twitter Bootstrap destroy my CSS layout?
- CSS Issues between browsers when using bootstrap
- Strange Twitter Bootstrap Behaviour
- Twitter Bootstrap does not play well with Firefox
- CSS - Twitter's Bootstrap 2.x issues with Firefox and IE