html - Bootstrap 容器流体不适用于网格

Question

代码在下面与 JSFiddle 链接。

• 问题是当我减小屏幕尺寸时，div block 应该在宽度减小的同一行中，而不是一个在另一个下方。 (通过增加屏幕宽度检查一次)。

• 另一个我想强调的是显示代码当我们减小块大小时，阅读更多 文本/段落选项。那就是当我们点击阅读更多时， block 大小应该增加并显示剩余的文本。如果有人为此建议代码，那将非常有帮助。

  代码是

.center{
        float: none;
        padding:0px;
        margin-left: auto;
        margin-right: auto;
        
    }
    
    div.allign{
        height:170px;
        margin:15px;
        text-align:center;
                
    }
    
    div.content{
        height:200px;
        background-color:#fff;
        background-color:#F4F1EE;
    }

<div class="container-fluid">
    <div class="row-fluid content">
            <div class="col-md-1 "></div>
            <div class="col-md-3 allign">
                <h3>Get Started</h3>
                <p>How it works?</p>
                <p>It's very easy and simple,just sign up for free and get    started with your account.
                It's easy to reserve or cancel a book from anywhere.</p>
            </div>
                
            <div class="col-md-3 allign">
                <h3>About library</h3>
                <p>location,Directions,Books info...</p>
                <p>Total books:1124<br />journals:130<br />.</p>
            </div>
                
            <div class="col-md-3 allign">
                <h3>No text books?</h3>
                <p>Dont worry here we go...</p>
                <p>Reserve your books from online by just one click.
                Read online/offline by downloading pdf files.</p>
            </div>
    </div>
</div>

点击此处查看 JSFiddle 示例

https://jsfiddle.net/nvpqfxbj/6/

提前致谢。

Answer 1

您在这些元素上使用了“md”网格大小，因此它们将在 991 像素以下变为全宽。如果要在所有设备上维护列，请使用“xs”列。

使用“col-xs-3”和“col-xs-1”代替“col-md-3”和“col-md-1”。但是，您不需要空的第一列，因为 BS 使用偏移列来解决它。

此外，从 .allign 设置的边距将覆盖 BS 在列上使用的边距，除非您将其删除，否则您将遇到问题。如果您需要边距，请使用嵌套在 col-* 容器内的另一个容器 div。

Bootstrap 示例: http://www.bootply.com/EfOZtUQqcs

这是构建所有响应式网格系统的基本原则，除非您理解这个基本概念，否则您将会遇到困难。 BS3 文档中涵盖了所有内容。

http://getbootstrap.com/css/#grid

至于你的“阅读更多”问题。您提供的代码不是罪魁祸首。服务器端或 JS 发生某些事情导致了此问题，而您没有提供服务器端或 JS 代码。