html - 更改 Bootstrap 的响应能力

Question

首先，我是 Bootstrap 的新手，所以请原谅我的新手。

问题是我正在尝试创建某种线程列表，当我缩小页面宽度时，所有内容都继续向下移动。

这就是我想要的: http://img04.imgland.net/CmWzwDR.png 事情变得越来越小，没有什么不对的地方

事情是这样的: http://img04.imgland.net/hNKc_Ok.png 是的，它很糟糕

你们知道有什么办法可以解决这个问题吗？我不必使用 Bootstrap ，但我认为这是最简单的。
谢谢

<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>

目前这是我在桌面屏幕上的网站: img.imgland.net/5VBEme.png
然后这就是它在移动设备上的样子:img02.imgland.net/cr-MUQd.png

Answer 1

如果没有您的代码的明确示例，我认为它与您使用的网格前缀有关。看看http://getbootstrap.com/css/#grid-options它显示了 4 个不同的前缀:

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

要控制布局在移动分辨率上的行为，请使用 .col-xs-* 类。 Bootstrap 文档提供了一个很好的例子:http://getbootstrap.com/css/#grid-example-mixed

上面的例子展示了如何混合类在不同的分辨率下有不同的行为:

<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>

使用此代码将使您的列在移动设备上从 50% 宽开始，在桌面设备上增加到 33.3% 宽。使用这些组合可以让您更好地控制所有容器分辨率的布局。

根据提供的代码进行编辑:

<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>

密切关注展示如何使用容器和网格系统的 Bootstrap 文档。我还会注意到列嵌套，因为这是显示包含在列中的列的好方法:http://getbootstrap.com/css/#grid-nesting

根据次要问题进行编辑

使用浏览器中的元素检查器功能详细查看 CSS 类以及创建列之间填充的内容。然后您可以调用您自己的 custom.css 文件 ( or re-compile if you are competent with Less )，它会覆盖默认的 Bootstrap 样式。这将删除我提供的示例代码中的左右填充:

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