How do you make a horizontal scroll bar using bootstrap's grid system

I'm trying to using bootstrap's columns and the combined total is 24. Now I know after a combined total of 12 it breaks to a line, but is there a way to keep it on the same line and just use a horizontal scroll bar to view the rest? this is what I have in the view:

<div class="col-lg-9 col-md-7 col-sm-8 col-xs-9">
            <div class="well">
                <h3>Example</h3>
                <hr>
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="Description_cat_well">
                            <div class="well">
                                <h4>Example</h4>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

This is what I have in my less file:

  .well {
    height: 325px;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 150%;
    max-width: 100%;
  }