Question

我正在尝试修改接近他标签的跨度宽度。

我想在同一行上显示多个组{label / data}。因此，我将角色分割为4列，然后想要对跨度应用特殊的宽度。但是没有办法，大小不会改变... 正在使用引导程序3。..

这里的代码：

<div class="row">   
    <div class="col-xl-4">
        <label class="">Batch ID : </label>
        <span class="border padding_right5 padding_left5 col-xl-3">4444</span>
    </div>    
    <div class="col-xl-4">
         <label class="">Etat : </label>
         **<span class="border border_etat_batch statut_green">En Cours</span>**
    </div>      
    <div class="col-xl-2">
        <label>Ligne : </label>
        <span class="border border_data">1</span>
    </div>  
    <div class="col-xl-2 text-right">
        <label>Cuve : </label>
        <span class="border border_data">B1</span>
    </div>                                                                                                                                                      
</div>

Result

Answer 1

在这里

.col-filled {
  display: flex;
}

.d-inline {
  flex: 1 1 auto
}

.statut_green {
  background: green;
  flex: 1 1 auto
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">   
    <div class="col-xl-4">
        <label class="">Batch ID : </label>
        <span class="border padding_right5 padding_left5 col-xl-3">4444</span>
    </div>    
    <div class="col-filled col-xl-4">
         <label class="">Etat : </label>
         **<span class="border border_etat_batch statut_green">En Cours</span>**
    </div>      
    <div class="col-filled col-xl-2">
        <label class='d-inline'>Ligne : </label>
        <span class="d-inline border border_data">1</span>
    </div>  
    <div class="col-xl-2 text-right">
        <label>Cuve : </label>
        <span class="border border_data">B1</span>
    </div>                                                                                                                                                      
</div>

Link

Answer 2

Bootsrap v4没有-xl类，替代方法是将col-{num}用于xtra小型设备，或将col-sm-{num}用于小型设备

还要填充span标签的空间，请使用bootstrap flex实用程序link here中的flex-fill类

<div class="col-4 d-flex">
         <label class="">Etat : </label>
         **<span class="border border_etat_batch statut_green flex-fill">En Cours</span>**
    </div>

.statut_green{
background:green;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">   
    <div class="col-4">
        <label class="">Batch ID : </label>
        <span class="border padding_right5 padding_left5 col-3">4444</span>
    </div>    
    <div class="col-4 d-flex">
         <label class="">Etat : </label>
         **<span class="border border_etat_batch statut_green flex-fill">En Cours</span>**
    </div>      
    <div class="col-2">
        <label>Ligne : </label>
        <span class="border border_data">1</span>
    </div>  
    <div class="col-2 text-right">
        <label>Cuve : </label>
        <span class="border border_data">B1</span>
    </div>                                                                                                                                                      
</div>

Bootstrap 4：如何在接近标签的跨度区域使用full with

2 个答案: