CODEWITHSUNDEEP
htmltwitter-bootstrap
JulianJ
JulianJ

Reputation: 1309

Why are the select boxes not equally spaced?

I'm trying to create a form with select boxes in Bootstrap 3 but for some reason I can't figure out how to get the select boxes to be the same width AND I can't figure out why there are not even gaps between the boxes when they are stacked above one another. ( the second and third boxes have no gap and I want a gap). Really appreciate if someone could tell me what I have got wrong.

I've made a fiddle here.

<div class="container">
  <div class="row row-centered">
    <div class="col-xs-8">
      <h3> Quick Search </h3>
      <form role="form" action="post" method="post">
        <div class="col-xs-8 col-md-3 col-lg-3">
          <div class="form-group">
            <div class="input-group">    
              <select class="form-control input-sm" name="location">
                <option value="" disabled selected>Location</option>
                 <option value="London">London</option>
                <option value="Bristol">Bristol</option>
                <option value="Manchester">Manchester</option>
              </select>
            </div>
          </div>
        </div>   
        <div class="form-group">
          <div class="col-xs-8 col-md-3 col-lg-3">
            <div class="input-group">
              <select id="skill" name="skill" class="form-control input-sm" ">
                <option value=" " disabled selected>Type of editor</option>
                <option value=""> All editors</option>
                <option value="offline">Offline editor</option>
                <option value="online">Online editor</option>
                <option value="offline,online ">Offline & Online editor</option>
              </select>
            </div>
          </div>
        </div>    
        <div class="form-group ">
          <div class="col-xs-8 col-md-3 col-lg-3 ">
            <div class="input-group ">
              <select id="start " name="start " class="form-control input-sm "">
                <option value="" disabled selected>When</option>
                <option value="">Anytime</option>
                <option value="today">Today</option>
                <option value="tomorrow">Tomorrow</option>
                <option value="next_week">Next Week</option>
                <option value="this_month">This Month</option>
                <option value="next_month">Next Month</option>
                <option value="in_future">In the Future</option>
              </select>    
            </div>
          </div>
        </div>    
        <div class="col-xs-8 col-md-3 col-lg-3">
          <button type="submit" name="submit" value="submit_1" class="btn btn-small btn-default btn-pull-right">Search</button>
          </button>
        </div>
      </form>    
      <br>
    </div>
    <!--Col-->
  </div>
  <!--row-->

Upvotes: 1

Views: 52

Answers (3)

Vishwa
Vishwa

Reputation: 809

Try this instead..hope this helps

<!DOCTYPE html>
<html>
<head><title>Page Title</title>
</head>
<body>
<div class="container">
    <div class="row row-centered">
        <div class="col-xs-8">
            <h3>
                Quick Search
            </h3>
            <form role="form" action="post" method="post">
                <div class="col-xs-8 col-md-3 col-lg-3">
                    <div class="form-group">
                        <div class="input-group">

                            <select class="form-control input-sm" name="location">
            <option value="disabled selected">Location</option>
             <option value="London">London</option>
            <option value="Bristol">Bristol</option>
            <option value="Manchester">Manchester</option>
          </select></div></div></div><div class="form-group">
                    <div class="col-xs-8 col-md-3 col-lg-4">
                        <div class="input-group">
                            <select id="skill" name="skill" class="form-control input-sm"><option value="disabled selected">Type of editor</option><option value=" ">All editors</option><option value="offline">Offline editor</option><option value="online">Online editor</option><option value="offline,online">Offline and Online editor</option></select></div></div></div>

Upvotes: 0

Andy Donegan
Andy Donegan

Reputation: 915

Your formatting etc is a little strange but the fix you need for the odd spacing is simple enough.

The first section under H3

</h3>
      <form role="form" action="post" method="post">
        <div class="col-xs-8 col-md-3 col-lg-3">
          <div class="form-group">
            <div class="input-group">

Just change to as follows :-

</h3>
      <form role="form" action="post" method="post">
        <div class="form-group">
          <div class="col-xs-8 col-md-3 col-lg-3">
            <div class="input-group">

Your code blocks for each input group were not the same.

And Nickanor's fix for the min-width should resolve the spacing of the boxes to all be the same width.

I might suggest a little bit wider width though and add this to top of your page above the 

<style>
  .input-sm {
    min-width: 160px !important;
  }
</style>

Upvotes: 2

nickanor
nickanor

Reputation: 669

.input-sm { min-width: 150px !important; } https://jsfiddle.net/v94e5sun/

Upvotes: 0

Related Questions