Narrow column in Bootstrap

I have a grid with two columns (in fact, some rows have 2 columns in a grid with 5 columns). I am trying to make the first as narrow as possible and giving the rest of the other. Nesting does not work because I only have 2 columns.

Basically, I need something like, col-xs-0.5or even better, a solution that will make the first column wide enough to fit*

Here is an example: https://jsfiddle.net/4jcL24ze/8/

<div class="container">
   <div class="row">
       <div class="col-xs-1">*</div>
       <div class="col-xs-11">some long description</div>
    </div>
</div>
+4
source share
1 answer

Narrow column

. .col-xs-0.5 col-xs-1, 8.33/2 = 4.166% col-xs-11.5. , .

*

, * , col-xs-12 : JSfiddle

.col-xs-05, .col-xs-115 {
    float: left;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
.col-xs-05 {
    width: 4.166%;
}
.col-xs-115 {
    width: 95.33%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row">
       <div class="col-xs-05">*</div>
       <div class="col-xs-115">some long description</div>
    </div>
</div>
Hide result

JSfiddle Demo

+3

Source: https://habr.com/ru/post/1612997/


All Articles