境界線から境界線へのボトム・トゥー・リバース

Question

内側にスパンを含む境界ボトム・スタイルをliに追加しましたが、機能しません。

<ul> 
<li style="border-bottom: 1px solid #ccc"> 
<span class="col-xs-5">Test 1</span> 
<span class="col-xs-7"> Test 2</span> 
</li> 
</ul> 

これはかなり単純ですが、境界線をスパン（Test1、Test2）の上に描画します。これが間違っていますか？

Answer 1

ブートストラップの使用col-*は、要素に浮動小数点を置きます。ブートストラップは、rowクラスで列をラップすることによってこれを処理するために構築されています。このような何か：

<ul> 
    <li class='row' style="border-bottom: 1px solid #ccc"> 
    <span class="col-xs-5">Test 1</span> 
    <span class="col-xs-7"> Test 2</span> 
    </li> 
</ul> 

それともulにrowクラスを置くことができ、ちょうどあなたがli要素を使用している方法によって異なります。

Answer 2

それを試してみてください。この

<ul> 
 
    <li style="border-bottom: 1px solid #ccc"> 
 
    <span class="col-xs-5">Test 1</span> 
 
    </li> 
 
    <li style="border-bottom: 1px solid #ccc"> 
 
    <span class="col-xs-7"> Test 2</span> 
 
    </li> 
 
</ul>

Answer 3

をお試しください： -

p { 
     border-style: solid; 
     border-bottom: thick dotted #ff0000; 
    } 

Answer 4

span{ 
 
border-bottom: 1px solid #ccc 
 
}

<ul> 
 
<li > 
 
<span class="col-xs-5" >Test 1</span> 
 
</li> 
 
    <li > 
 
<span class="col-xs-7"> Test 2</span> 
 
</li> 
 
</ul>