引导容器流体不适用于网格

下面的代码与 JSFiddle 链接。

  • 问题是当我减小屏幕尺寸时,div 块应该在同一行中,宽度减小,而不是它们一个低于另一个。 (一旦通过增加屏幕宽度来检查它)。

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

    代码是

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

提前致谢。

stack overflow Bootstrap container-fluid not working for grids
原文答案

答案:

作者头像

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

而不是 'col-md-3' 和 'col-md-1' 使用 'col-xs-3' 和 'col-xs-1'。但是,您不需要空的第一列,因为 BS 使用偏移列来解决它。

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

引导示例: http://www.bootply.com/EfOZtUQqcs

这是构建所有响应式网格系统的基本原则,除非您了解这个基本概念,否则您将很难做到。这一切都包含在 BS3 文档中。

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

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

作者头像

这对我有用。 引导程序 5

<div class=".container-fluid">