Changing Bootstrap's responsiveness

Question

First of all, I am really new to Bootstrap so please excuse my newbiness.

The problem is that I am trying to create some sort of a thread list and when I shrink the width of the page all the contents keep moving down one another.

This is what I want: http://img04.imgland.net/CmWzwDR.png Things just becoming smaller and nothing going out of place

This is what happens: http://img04.imgland.net/hNKc_Ok.png Ya its pretty bad

Do you guys know of any way to fix this problem? I don't have to use bootstrap, but I thought it would be easiest.
Thanks

<div style={{marginTop: "80px", marginLeft: "20px", marginRight: "20px"}}>
  <div style = {{height: "80px", marginBottom: "10px", padding: "1px 1px 1px 1px", border: "2px solid #000000"}} class="row-fluid" >
     <div class = "col-xs-2" style= {{width: "20px", float: "left"}}>
       <div class = "row" > 
        <img src="img/upvote.png" />
        <img src="img/downvote.png" />
       </div>
     </div>

    <div class = "col-xs-2" style={{width: "100px", marginLeft: "0px", padding: "0px 0px 0px 0px", float: "left"}}> 
        <img src={thumbnail} style={{height: "80px", width: "100px"}}/>
    </div>

    <div class = "col-xs-8" style= {{marginLeft: "10px"}}>
        <div class = "row">
            <h3 style = {{height: "50px", textAlign: "left", marginTop: "0px", marginBottom: "0px", padding: "0px 0px 0px 0px"}}> {title} </h3>
            <p style = {{height: "30px", textAlign: "left", marginBottom: "0px", padding: "0px 0px 0px 0px", overflow: "hidden"}}> {desc} </p>
        </div>
    </div>
 </div> 
</div>

Currently this is my site on desktop screen: img.imgland.net/5VBEme.png
And then this is what it would look like on mobile: img02.imgland.net/cr-MUQd.png

Answer 1

Without explicit samples of your code, I assume it has something to do with the grid prefix you are using. Take a look at http://getbootstrap.com/css/#grid-options which shows the 4x different prefixes:

• .col-xs-*
• .col-sm-*
• .col-md-*
• .col-lg-*

To control the behaviour of your layout on mobile resolutions use the .col-xs-* class. Bootstrap documentation gives a great example: http://getbootstrap.com/css/#grid-example-mixed

The above exmaple shows how to mix classes to have different behaviour on different resolutions:

<div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Using this code will have your columns start at 50% wide on mobile and bump up to 33.3% wide on desktop. Using these combinations allows you to have quite a fine control over layout across all container resolutions.

EDIT BASED ON CODE SUPPLIED:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2">
            <img src="img/upvote.png" />
            <img src="img/downvote.png" />
        </div>
        <div class="col-xs-2"> 
            <img src="#" />
        </div>
        <div class="col-xs-8">
            <h3>{title}</h3>
            <p>{desc}</p>
        </div>
    </div>
</div>

Pay close attention to the Bootstrap docs which show how to use containers and the grid system. I would also take note of the Column nesting as this is a great way to show columns contained within columns: http://getbootstrap.com/css/#grid-nesting

EDIT BASED ON SECONDARY QUESTION

Use the element inspector function in your browser to have a detailed look at your CSS classes and what is creating the padding between columns. You can then call your own custom.css file (or re-compile if you are competent with Less) which overrides the default Bootstrap styling. This will remove the left and right padding in the example code I have supplied:

.col-xs-2, .col-xs-8 {
    padding-right: 0px;
    padding-left: 0px;
}