Twitter Bootstrap Question posted in

Twitter bootstrap – remove spacing between divs, bootstrap

I have used Twitter Bootstrap to separate the <div> as follows

<div class="row" style="padding-top:10px;">
    <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4" style="border-style:dotted;">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-2 col-xs-2">
                <label>Period:</label>
            </div>
            <div class="col-lg-offset-1 col-lg-8 col-md-offset-1 col-md-7 col-sm-offset-1 col-sm-6 col-xs-offset-1 col-xs-6">
                @Html.DropDownList("Period", new List<SelectListItem>() {
                    new SelectListItem{Text = "Last 7 Days", Value = "6"},
                    new SelectListItem{Text = "Last 15 Days", Value = "14"},
                    new SelectListItem{Text = "Last 30 Days", Value = "29"},
                    new SelectListItem{Text = "Last 90 Days", Value = "89"},
                    new SelectListItem{Text = "Last 180 Days", Value = "179"},
                    new SelectListItem{Text = "Last 365 Days", Value = "364", Selected = true},
                    new SelectListItem{Text = "Custom", Value = "0"}
                })
            </div>
        </div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4" style="border-style:solid;">
       <div class="row">
           <div class="col-lg-6  col-md-6 col-sm-4 col-xs-4">
               <input type="text" id="FromDatePicker" readonly="readonly" placeholder="From Date" style="display: none; width: 78px;  line-height: 25px;">
           </div>
           <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4">
               <input type="text" id="ToDatePicker" readonly="readonly" placeholder="To Date" style="display: none; width: 78px;  line-height: 25px; ">
           </div>
       </div>
   </div>

As can be seen, I have divided the row <div> in 6-6. When i reduce screen to small size the divs appear as shown in the attached image. I want the extra space to be removed when the screen is in XS or SM mode.2nd line in image is what i want

Tags:

2

Answers


  1. 0

    You can do something like this:

    <div class="row row-no-padding" style="padding-top:10px;">

.row-no-padding [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    Or just for xs/sm:

    .row-no-padding [class*="col-xs"],
.row-no-padding [class*="col-sm"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
    Login or Signup to reply.
  2. 0

    The reason for this is that . A new style sheet is being used when you view it in small screen .

    HOW TO FIX :

    1. Test it is browser with responsive utilities. Select low screen.

    2. Open firebug. Go to the element. Click on search icon on top. Select the element it will show which css is being used.

    3. Remove the padding from that css.

    It should fix the issue

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search