If the grid is displayed, the code should look like this:
<div><div><p>Box 1</p></div><div><p>Box 2</p></div><div><p>Box 3</p></div><div><p>Box 4</p></div><div><p>Box 5</p></div><div><p>Box 6</p></div><div><p>Box 7</p></div><div><p>Box 8</p></div><div><p>Box 9</p></div><div><p>Box 10</p></div><div><p>Box 11</p></div><div><p>Box 10</p></div><div><p>Box 11</p></div><div><p>Box 8</p></div><div><p>Box 9</p></div><div><p>Box 10</p></div><div><p>Box 11</p></div><div><p>Box 12</p></div></div></div>
Where col-*-* represents the column width occupied by the grid system under different types of devices.
Extremely small Mobile phone (<768px) | Small Tablet (≥768px) | middle Computer (≥992px) | big Computer (≥1200px) | |
|---|---|---|---|---|
| container maximum width | None (auto) | 750px | 970px | 1170px |
| Class name prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Maximum column width | Auto | ~62px | ~81px | ~97px |
| Column gap | 15px (ie 30px ) | |||
When the height of the column is different, the effect of float will destroy the structure of the grid, which can be avoided by using the response class. Here is a complete grid code:
<div><div><p>Box 1</p></div><div><p>Box 2</p></div><div></div><div><p>Box 3</p></div><div></div><div><p>Box 4</p></div><div></div><div><p>Box 5</p></div><div><p>Box 6</p></div><div></div><div><p>Box 7</p></div><div><p>Box 8</p></div><div></div><div><p>Box 8</p></div><div></div><div><p>Box 5</p></div><div></div><p>Box 6</p></div><div></div><div><p>Box 7</p></div><div><p>Box 8</p></div><div></div><div><p>Box 9</p></div><div></div><div><p>Box 10</p></div><div></div><div><p>Box 11</p></div><div><p>Box 12</p></div></div></div>
The visible-*-* indicates which device is displayed with which display attribute. Since the small device defaults to a single column, there is no need to use the response class to customize it.
Response classes can also be used in normal tags, such as the following code:
<p>This paragraph is visible only on extra small devices.</p><p>This paragraph is visible only on small devices.</p><p>This paragraph is visible only on medium devices.</p><p>This paragraph is visible only on large devices.</p>
Similarly, you can also use hidden-* to set it to hide in a specific device:
<p>This paragraph is hidden only on extra small devices.</p><p>This paragraph is hidden only on small devices.</p><p>This paragraph is hidden only on medium devices.</p><p>This paragraph is hidden only on large devices.</p>
The response class can also set the format of printing:
The above is the grid system of BootStrap3 study notes (1) introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!