CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Harsha M V
Harsha M V

Reputation: 54969

Bootstrap column gets displaced into new row

I am using Bootstrap3 and using a collapsible element to in my design.

I am using 12 column inside the row as follows

<!-- Search Filter -->
<div id="search-filter">
  <div class="container">
    <div class="row">
      <div class="col-md-5 col-xs-12">

        <!-- Collapse Search -->
        <button type="button" class="navbar-toggle navbar-toggle-search-filter" data-toggle="collapse" data-target="#searchbar-collapse-set"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-chevron-down"></span> </button>
        <!-- /Collapse Search -->

        <h3>Showing 345 Results <small>(Hill Stations around Bangalore)</small></h3>

      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="searchbar-collapse-set">

        <div class="col-md-4 col-xs-12">
          <div class="distance">
            <h5>distance:</h5>
            <div id="distance-slider"></div>
            <span class="distance-value">250 kms</span>
          </div>
        </div>

        <div class="col-md-3 col-xs-12">
          <div class="sort">
            <h5>sort:</h5>
            <ul class="nav nav-pills">
              <li class="active"><a href="#">popular</a></li>
              <li><a href="#">name</a></li>
              <li><a href="#">distance</a></li>
            </ul>
          </div>
        </div>

      </div>
      <!-- /.navbar-collapse -->

      <div class="clearfix"></div>

    </div>
  </div>
</div>
<!-- /Search Filter -->

enter image description here

Due to the Collapsible element i the third column is shifting to the next row.

I removed the NavCollapse padding to 0 and the content disappears from the drop down as bellow.

enter image description here

By Adding the following code it gets back into place as bellow.

enter image description here

But it Disrupts the full screen view as bellow.

enter image description here

Nomad Link

Upvotes: 0

Views: 529

Answers (1)

joshhunt
joshhunt

Reputation: 5345

My suggestion is to use a media query such as

@media (min-width: 1200px) { ... }

so that you can add the padding on a desktop display without effecting the display on smaller devices.

Upvotes: 1

Related Questions