bootstrap second colum重叠第一列

Question

我有以下bootstrap结构。我有10 | 2列但第二列与第一列重叠，我有交叉css属性并删除包装但它仍然保持重叠第一列，如下图所示

<div class="row">
    <div class="col-md-10">Left Column</div>
    <div class="col-md-2 pl-0">
        <div style="width: 100%; background-color: red; height: 500px;">right Column</div>
</div>

更新：

宽度float:left;到右栏的位置如下图所示

Answer 1

在div中使用float：letf

右列

Answer 2

<div class="row">
    <div class="col-md-10" style="padding-right:0">Left Column</div>
    <div class="col-md-2 pl-0"  style="padding-left:0">
        <div style="width: 100%; background-color: red; height: 500px;">right Column</div>
</div>

或

 <div class="row">
        <div class="col-xs-12 col-sm-10 col-md-10" >Left Column</div>
        <div class="col-xs-12 col-sm-2 col-md-2 pl-0" >
            <div style="width: 100%; background-color: red; height: 500px;">right Column</div>
    </div>

试试这个..