theHussle
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>

enter image description here

enter image description here

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&#248;pke
Alexander K&#248;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