Question

我知道这将是如此简单，但我来到这里。我在很多方面尝试过无助。代码在下面与JSFiddle联系。

实际问题是当我减小div的屏幕尺寸时应该在宽度减小的同一条线上，而不是它们一个在另一个之下。（一旦通过增加屏幕宽度来检查它）。
我要强调的另一个是显示的代码当我们减小块大小时， 读取更多 文本/段落选项。那就是当我们点击阅读时，块大小应该更多增加并显示剩余文本。如果有人这将是非常有帮助的为此建议代码。

代码是

＆＃13;

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

＆＃13;

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

＆＃13;

点击此处查看JSFiddle示例

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

提前致谢。

Answer 1

您正在使用＆＃34; md＆＃34;这些元素上的网格大小使它们将变为991px以下的全宽。如果要在所有设备上维护列，请使用＆＃34; xs＆＃34;列。

而不是＆＃39; col-md-3＆＃39;和＆＃39; col-md-1＆＃39;使用＆＃39; col-xs-3＆＃39;和＆＃39; col-xs-1＆＃39;。但是，您不需要空的第一列，因为BS使用偏移列对其进行寻址。

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

BOOTPLY示例： http://www.bootply.com/EfOZtUQqcs

这是所有响应式网格系统的基本原则，除非您了解这一基本概念，否则您将陷入困境。它全部包含在BS3文档中。

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

至于你的＆＃34;阅读更多＆＃34;问题。您提供的代码不是罪魁祸首。服务器端或JS上发生了一些导致此问题的事情，并且您没有提供服务器端或JS代码。

Bootstrap容器 - 液体不适用于网格

1 个答案: