CODEWITHSUNDEEP
htmltwitter-bootstrap
Nishant Baranwal
Nishant Baranwal

Reputation: 1238

Ordered list of items in pair

I have to show ordered listed items side by side in pairs with varying content size (generating the li's using angular ng-repeat from some model value). I have used bootstrap grid columns to manage the li content positioning. problem is the numbering of li is getting very close with content of previous column. as in my case second li order number "2" is touching the content of first li. on inspecting I fount that the index number is outside of "col-sm-6". changing the padding-left of columns will fix this but I am looking for a better solution in bootstrap way.

 /* highlight column border */
        .col-sm-6 {
            border: solid 1px red;
        }

        /* a fix for column displacement */
        .col-sm-6:nth-child(odd) {
            clear: left;
        }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <ol class="row">
            <li class="list-group-item2 col-sm-6">
                Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem is text of the printing and typesetting industr
                Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem Ipsum is simply dummy text
                of the printing and typesetting industry.
            </li>
            <li class="list-group-item2 col-sm-6">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </li>

            <li class="list-group-item2 col-sm-6 label-warning">
                Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem Ipsum is simply dummy text of the printing
                and typesetting industr Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem Ipsum
                is simply dummy text of the printing and typesetting industr Lorem Ipsum is simply dummy text of the printing
                and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of
                the printing and typesetting industry.
            </li>
            <li class="list-group-item2 col-sm-6">
                Lorem Ipsum is simply dummy text
            </li>
            <li class="list-group-item2 col-sm-6">
                Lorem Ipsum is simply dummy text
            </li>
            <li class="list-group-item2 col-sm-6">
                Lorem Ipsum is simply dummy text
            </li>
        </ol>
    </div>

Upvotes: 0

Views: 33

Answers (1)

Ben
Ben

Reputation: 47

the best way is use list-style-position 

ul {
   list-style-position: inside;
}

Upvotes: 1

Related Questions