2015-06-19 4 views
1

Я использовал Twitter Bootstrap, чтобы отделить <div> следующегорасстояния между дивами удалить, самозагрузки

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

Как можно видеть, я разделил row<div> в 6-6. Когда я уменьшаю экран до небольшого размера, div появляются, как показано на прилагаемом изображении. Я хочу, чтобы дополнительное пространство было удалено, когда экран находится в XS или SM режиме. 2nd line in image is what i want

+0

это связанно с фиксированной шириной до даты-початкоотделяющего полей ввода – Mehar

+0

сделать дату-подборщик DIVS 100% с мобильными устройствами с помощью средств массовой информации запросов – Mehar

ответ

2

Вы можете сделать что-то вроде этого:

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

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

Или просто для хв/см:

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

Я получаю ошибка отсутствия селектора. Это точный синтаксис.? – user2998990

+0

Извините, я забыл, что использовал синтаксис LESS. :) – Nicholas

+0

Спасибо ... Это сработало до некоторой степени. – user2998990

1

Причина этого заключается в том, что. Новая таблица стилей используется, когда вы просматриваете ее на маленьком экране.

КАК FIX:

  1. Test это браузер с адаптивными утилитами. Выберите низкий экран.

  2. Открытый firebug. Перейдите к элементу. Нажмите на значок поиска сверху. Выберите элемент, который будет показывать, какой css используется.

  3. Удалите прокладку из этого css.

Это должно решить проблему

Смежные вопросы