删除 div 之间的间距，引导程序答案

【问题标题】：remove spacing between divs, bootstrap删除 div 之间的间距，引导程序
【发布时间】：2015-10-22 06:35:08
【问题描述】：

我已经使用 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 模式时，我希望移除多余的空间。

【问题讨论】：

这是由于日期选择器输入字段的固定宽度
在移动设备上使用媒体查询使日期选择器 div 100%

标签： c# html css .net twitter-bootstrap

【解决方案1】：

你可以这样做：

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

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

或者只是为了 xs/sm：

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

【讨论】：

我收到缺少选择器的错误。这是确切的语法吗？
抱歉，忘记我使用的是 LESS 语法。 :)

【解决方案2】：

这样做的原因是 .在小屏幕中查看时正在使用新样式表。

如何修复：

测试它是具有响应实用程序的浏览器。选择低屏。
打开萤火虫。转到元素。点击顶部的搜索图标。选择它将显示正在使用的 CSS 的元素。
从该 css 中删除填充。

应该可以解决问题

【讨论】：