css - 在 Cordova 中使用 radio 输入 Bootstrap 3 网格列高度

Question

我正在尝试构建一个表，其中每一行看起来像这样:

    <div class="row table-row" ng-click="files.openItem(item)">
        <div class="col-xs-1">
            <label class="radio-inline"><input type="radio">Label</label>
        </div>
        <div class="col-xs-2 truncate">12:00</div>
        <div class="col-xs-2 truncate">Variabile</div>
        <div class="col-xs-2 truncate" data-toggle="modal" data-target="#descripcion-modal">Description adkhdak kahdka</div>
        <div class="col-xs-1 truncate">88</div>
        <div class="col-xs-4 truncate">99</div>
    </div>

相关的 CSS 是:

.table-row > div {
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 2px solid #35B5E5;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

可以在这里看到现场演示:http://plnkr.co/edit/XeRE4SW3PMamB6eoxR2q?p=preview

第一列的高度略大于第二列，如蓝色底部边框所示。

我想要一个没有标签的单选按钮。如果省略标签文本，则单选按钮会沉入行边框中。所以我完全删除了 label 标签(如演示的第 3 行所示)，有一段时间我认为我的问题已经解决了。

但后来我将此代码部署到 4.0 设备上的 Cordova 应用程序中。它没有按预期呈现:http://i.stack.imgur.com/YIHpz.png

有什么办法可以解决这个问题吗？

Answer 1

有一个添加的 4px 或 margin-top 来自 bootstrap，它插入 radio 并最终插入边界线。

不要将 radio 包裹在label 内，并像这样将 margin-top 设置为零。

.table-row input[type=radio]{
     margin-top:0;
}