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

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

.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;
}

改变Bootstrap的响应能力

1 个答案: