grid.css 17 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180
  1. /*2.1 栅格系统
  2. Name: style_span
  3. Example:
  4. <div class="responsive">
  5. <div class="row cl" role="grid">
  6. <div class="col-1">……</div>
  7. ……
  8. </div>
  9. </div>
  10. Explain: 栅格系统
  11. */
  12. /*2.1 响应式栅格系统*/
  13. .container {
  14. padding-right: 15px;
  15. padding-left: 15px;
  16. margin-right: auto;
  17. margin-left: auto;
  18. }
  19. .container-fluid {
  20. padding-right: 15px;
  21. padding-left: 15px;
  22. margin-right: auto;
  23. margin-left: auto;
  24. }
  25. @media (min-width: 992px) {
  26. .container {
  27. width: 960px;
  28. }
  29. }
  30. @media (min-width: 1200px) {
  31. .container {
  32. width: 1170px;
  33. }
  34. }
  35. @media (min-width: 1300px) {
  36. .container {
  37. width: 1270px;
  38. }
  39. }
  40. @media print {
  41. .container {
  42. width: auto;
  43. }
  44. }
  45. .row {
  46. box-sizing: border-box;
  47. margin-left: -15px;
  48. margin-right: -15px;
  49. }
  50. .col-1,
  51. .col-2,
  52. .col-3,
  53. .col-4,
  54. .col-5,
  55. .col-6,
  56. .col-7,
  57. .col-8,
  58. .col-9,
  59. .col-10,
  60. .col-11,
  61. .col-12,
  62. .col-xs-1,
  63. .col-sm-1,
  64. .col-md-1,
  65. .col-lg-1,
  66. .col-xs-2,
  67. .col-sm-2,
  68. .col-md-2,
  69. .col-lg-2,
  70. .col-xs-3,
  71. .col-sm-3,
  72. .col-md-3,
  73. .col-lg-3,
  74. .col-xs-4,
  75. .col-sm-4,
  76. .col-md-4,
  77. .col-lg-4,
  78. .col-xs-5,
  79. .col-sm-5,
  80. .col-md-5,
  81. .col-lg-5,
  82. .col-xs-6,
  83. .col-sm-6,
  84. .col-md-6,
  85. .col-lg-6,
  86. .col-xs-7,
  87. .col-sm-7,
  88. .col-md-7,
  89. .col-lg-7,
  90. .col-xs-8,
  91. .col-sm-8,
  92. .col-md-8,
  93. .col-lg-8,
  94. .col-xs-9,
  95. .col-sm-9,
  96. .col-md-9,
  97. .col-lg-9,
  98. .col-xs-10,
  99. .col-sm-10,
  100. .col-md-10,
  101. .col-lg-10,
  102. .col-xs-11,
  103. .col-sm-11,
  104. .col-md-11,
  105. .col-lg-11,
  106. .col-xs-12,
  107. .col-sm-12,
  108. .col-md-12,
  109. .col-lg-12 {
  110. min-height: 1px;
  111. position: relative;
  112. padding-left: 15px;
  113. padding-right: 15px;
  114. box-sizing: border-box;
  115. -webkit-transition: all 0.3s ease-in;
  116. -moz-transition: all 0.3s ease-in;
  117. -o-transition: all 0.3s ease-in;
  118. transition: all 0.3s ease-in;
  119. }
  120. .col-1 {
  121. width: 8.33333%;
  122. }
  123. .col-2 {
  124. width: 16.66667%;
  125. }
  126. .col-3 {
  127. width: 25%;
  128. }
  129. .col-4 {
  130. width: 33.33333%;
  131. }
  132. .col-5 {
  133. width: 41.66667%;
  134. }
  135. .col-6 {
  136. width: 50%;
  137. }
  138. .col-7 {
  139. width: 58.33333%;
  140. }
  141. .col-8 {
  142. width: 66.66667%;
  143. }
  144. .col-9 {
  145. width: 75%;
  146. }
  147. .col-10 {
  148. width: 83.33333%;
  149. }
  150. .col-11 {
  151. width: 91.66667%;
  152. }
  153. .col-12 {
  154. width: 100%;
  155. }
  156. .col-offset-0 {
  157. margin-left: 0;
  158. }
  159. .col-offset-1 {
  160. margin-left: 8.33333%;
  161. }
  162. .col-offset-2 {
  163. margin-left: 16.66667%;
  164. }
  165. .col-offset-3 {
  166. margin-left: 25%;
  167. }
  168. .col-offset-4 {
  169. margin-left: 33.33333%;
  170. }
  171. .col-offset-5 {
  172. margin-left: 41.66667%;
  173. }
  174. .col-offset-6 {
  175. margin-left: 50%;
  176. }
  177. .col-offset-7 {
  178. margin-left: 58.33333%;
  179. }
  180. .col-offset-8 {
  181. margin-left: 66.66667%;
  182. }
  183. .col-offset-9 {
  184. margin-left: 75%;
  185. }
  186. .col-offset-10 {
  187. margin-left: 83.33333%;
  188. }
  189. .col-offset-11 {
  190. margin-left: 91.66667%;
  191. }
  192. .col-push-0 {
  193. position: relative;
  194. left: 0;
  195. right: auto;
  196. }
  197. .col-pull-0 {
  198. right: 0;
  199. left: auto;
  200. }
  201. .col-push-1 {
  202. left: 8.33333%;
  203. right: auto;
  204. }
  205. .col-pull-1 {
  206. right: 8.33333%;
  207. left: auto;
  208. }
  209. .col-push-2 {
  210. left: 16.66667%;
  211. right: auto;
  212. }
  213. .col-pull-2 {
  214. right: 16.66667%;
  215. left: auto;
  216. }
  217. .col-push-3 {
  218. left: 25%;
  219. right: auto;
  220. }
  221. .col-pull-3 {
  222. right: 25%;
  223. left: auto;
  224. }
  225. .col-push-4 {
  226. left: 33.33333%;
  227. right: auto;
  228. }
  229. .col-pull-4 {
  230. right: 33.33333%;
  231. left: auto;
  232. }
  233. .col-push-5 {
  234. left: 41.66667%;
  235. right: auto;
  236. }
  237. .col-pull-5 {
  238. right: 41.66667%;
  239. left: auto;
  240. }
  241. .col-push-6 {
  242. left: 50%;
  243. right: auto;
  244. }
  245. .col-pull-6 {
  246. right: 50%;
  247. left: auto;
  248. }
  249. .col-push-7 {
  250. left: 58.33333%;
  251. right: auto;
  252. }
  253. .col-pull-7 {
  254. right: 58.33333%;
  255. left: auto;
  256. }
  257. .col-push-8 {
  258. left: 66.66667%;
  259. right: auto;
  260. }
  261. .col-pull-8 {
  262. right: 66.66667%;
  263. left: auto;
  264. }
  265. .col-push-9 {
  266. left: 75%;
  267. right: auto;
  268. }
  269. .col-pull-9 {
  270. right: 75%;
  271. left: auto;
  272. }
  273. .col-push-10 {
  274. left: 83.33333%;
  275. right: auto;
  276. }
  277. .col-pull-10 {
  278. right: 83.33333%;
  279. left: auto;
  280. }
  281. .col-push-11 {
  282. left: 91.66667%;
  283. right: auto;
  284. }
  285. .col-pull-11 {
  286. right: 91.66667%;
  287. left: auto;
  288. }
  289. /*局部模块平分*/
  290. .col-1-1 {
  291. width: 100%;
  292. }
  293. .col-2-1 {
  294. width: 50%;
  295. }
  296. .col-3-1 {
  297. width: 33.333333%;
  298. }
  299. .col-3-2 {
  300. width: 66.666667%;
  301. }
  302. .col-4-1 {
  303. width: 25%;
  304. }
  305. .col-4-3 {
  306. width: 75%;
  307. }
  308. .col-5-1 {
  309. width: 20%;
  310. }
  311. .col-5-2 {
  312. width: 40%;
  313. }
  314. .col-5-3 {
  315. width: 60%;
  316. }
  317. .col-5-4 {
  318. width: 80%;
  319. }
  320. .col-6-1 {
  321. width: 16.666667%;
  322. }
  323. .col-6-5 {
  324. width: 83.333333%;
  325. }
  326. .col-xs-1,
  327. .col-xs-2,
  328. .col-xs-3,
  329. .col-xs-4,
  330. .col-xs-5,
  331. .col-xs-6,
  332. .col-xs-7,
  333. .col-xs-8,
  334. .col-xs-9,
  335. .col-xs-10,
  336. .col-xs-11,
  337. .col-xs-12 {
  338. float: left;
  339. }
  340. .col-xs-12 {
  341. width: 100%;
  342. }
  343. .col-xs-11 {
  344. width: 91.66666667%;
  345. }
  346. .col-xs-10 {
  347. width: 83.33333333%;
  348. }
  349. .col-xs-9 {
  350. width: 75%;
  351. }
  352. .col-xs-8 {
  353. width: 66.66666667%;
  354. }
  355. .col-xs-7 {
  356. width: 58.33333333%;
  357. }
  358. .col-xs-6 {
  359. width: 50%;
  360. }
  361. .col-xs-5 {
  362. width: 41.66666667%;
  363. }
  364. .col-xs-4 {
  365. width: 33.33333333%;
  366. }
  367. .col-xs-3 {
  368. width: 25%;
  369. }
  370. .col-xs-2 {
  371. width: 16.66666667%;
  372. }
  373. .col-xs-1 {
  374. width: 8.33333333%;
  375. }
  376. .col-xs-pull-12 {
  377. right: 100%;
  378. }
  379. .col-xs-pull-11 {
  380. right: 91.66666667%;
  381. }
  382. .col-xs-pull-10 {
  383. right: 83.33333333%;
  384. }
  385. .col-xs-pull-9 {
  386. right: 75%;
  387. }
  388. .col-xs-pull-8 {
  389. right: 66.66666667%;
  390. }
  391. .col-xs-pull-7 {
  392. right: 58.33333333%;
  393. }
  394. .col-xs-pull-6 {
  395. right: 50%;
  396. }
  397. .col-xs-pull-5 {
  398. right: 41.66666667%;
  399. }
  400. .col-xs-pull-4 {
  401. right: 33.33333333%;
  402. }
  403. .col-xs-pull-3 {
  404. right: 25%;
  405. }
  406. .col-xs-pull-2 {
  407. right: 16.66666667%;
  408. }
  409. .col-xs-pull-1 {
  410. right: 8.33333333%;
  411. }
  412. .col-xs-pull-0 {
  413. right: auto;
  414. }
  415. .col-xs-push-12 {
  416. left: 100%;
  417. }
  418. .col-xs-push-11 {
  419. left: 91.66666667%;
  420. }
  421. .col-xs-push-10 {
  422. left: 83.33333333%;
  423. }
  424. .col-xs-push-9 {
  425. left: 75%;
  426. }
  427. .col-xs-push-8 {
  428. left: 66.66666667%;
  429. }
  430. .col-xs-push-7 {
  431. left: 58.33333333%;
  432. }
  433. .col-xs-push-6 {
  434. left: 50%;
  435. }
  436. .col-xs-push-5 {
  437. left: 41.66666667%;
  438. }
  439. .col-xs-push-4 {
  440. left: 33.33333333%;
  441. }
  442. .col-xs-push-3 {
  443. left: 25%;
  444. }
  445. .col-xs-push-2 {
  446. left: 16.66666667%;
  447. }
  448. .col-xs-push-1 {
  449. left: 8.33333333%;
  450. }
  451. .col-xs-push-0 {
  452. left: auto;
  453. }
  454. .col-xs-offset-12 {
  455. margin-left: 100%;
  456. }
  457. .col-xs-offset-11 {
  458. margin-left: 91.66666667%;
  459. }
  460. .col-xs-offset-10 {
  461. margin-left: 83.33333333%;
  462. }
  463. .col-xs-offset-9 {
  464. margin-left: 75%;
  465. }
  466. .col-xs-offset-8 {
  467. margin-left: 66.66666667%;
  468. }
  469. .col-xs-offset-7 {
  470. margin-left: 58.33333333%;
  471. }
  472. .col-xs-offset-6 {
  473. margin-left: 50%;
  474. }
  475. .col-xs-offset-5 {
  476. margin-left: 41.66666667%;
  477. }
  478. .col-xs-offset-4 {
  479. margin-left: 33.33333333%;
  480. }
  481. .col-xs-offset-3 {
  482. margin-left: 25%;
  483. }
  484. .col-xs-offset-2 {
  485. margin-left: 16.66666667%;
  486. }
  487. .col-xs-offset-1 {
  488. margin-left: 8.33333333%;
  489. }
  490. .col-xs-offset-0 {
  491. margin-left: 0;
  492. }
  493. @media (max-width: 767px) {
  494. .responsive [class^="col-"],
  495. .responsive [class*=" col-"] {
  496. float: none!important;
  497. width: auto !important;
  498. }
  499. .responsive [class^="col-offset-"],
  500. .responsive [class*=" col-offset-"] {
  501. margin-left: 0px !important;
  502. }
  503. }
  504. @media (min-width: 768px) {
  505. .col-sm-1,
  506. .col-sm-10,
  507. .col-sm-11,
  508. .col-sm-12,
  509. .col-sm-2,
  510. .col-sm-3,
  511. .col-sm-4,
  512. .col-sm-5,
  513. .col-sm-6,
  514. .col-sm-7,
  515. .col-sm-8,
  516. .col-sm-9 {
  517. float: left;
  518. }
  519. .col-sm-12 {
  520. width: 100%;
  521. }
  522. .col-sm-11 {
  523. width: 91.66666667%;
  524. }
  525. .col-sm-10 {
  526. width: 83.33333333%;
  527. }
  528. .col-sm-9 {
  529. width: 75%;
  530. }
  531. .col-sm-8 {
  532. width: 66.66666667%;
  533. }
  534. .col-sm-7 {
  535. width: 58.33333333%;
  536. }
  537. .col-sm-6 {
  538. width: 50%;
  539. }
  540. .col-sm-5 {
  541. width: 41.66666667%;
  542. }
  543. .col-sm-4 {
  544. width: 33.33333333%;
  545. }
  546. .col-sm-3 {
  547. width: 25%;
  548. }
  549. .col-sm-2 {
  550. width: 16.66666667%;
  551. }
  552. .col-sm-1 {
  553. width: 8.33333333%;
  554. }
  555. .col-sm-pull-12 {
  556. right: 100%;
  557. }
  558. .col-sm-pull-11 {
  559. right: 91.66666667%;
  560. }
  561. .col-sm-pull-10 {
  562. right: 83.33333333%;
  563. }
  564. .col-sm-pull-9 {
  565. right: 75%;
  566. }
  567. .col-sm-pull-8 {
  568. right: 66.66666667%;
  569. }
  570. .col-sm-pull-7 {
  571. right: 58.33333333%;
  572. }
  573. .col-sm-pull-6 {
  574. right: 50%;
  575. }
  576. .col-sm-pull-5 {
  577. right: 41.66666667%;
  578. }
  579. .col-sm-pull-4 {
  580. right: 33.33333333%;
  581. }
  582. .col-sm-pull-3 {
  583. right: 25%;
  584. }
  585. .col-sm-pull-2 {
  586. right: 16.66666667%;
  587. }
  588. .col-sm-pull-1 {
  589. right: 8.33333333%;
  590. }
  591. .col-sm-pull-0 {
  592. right: 0;
  593. }
  594. .col-sm-push-12 {
  595. left: 100%;
  596. }
  597. .col-sm-push-11 {
  598. left: 91.66666667%;
  599. }
  600. .col-sm-push-10 {
  601. left: 83.33333333%;
  602. }
  603. .col-sm-push-9 {
  604. left: 75%;
  605. }
  606. .col-sm-push-8 {
  607. left: 66.66666667%;
  608. }
  609. .col-sm-push-7 {
  610. left: 58.33333333%;
  611. }
  612. .col-sm-push-6 {
  613. left: 50%;
  614. }
  615. .col-sm-push-5 {
  616. left: 41.66666667%;
  617. }
  618. .col-sm-push-4 {
  619. left: 33.33333333%;
  620. }
  621. .col-sm-push-3 {
  622. left: 25%;
  623. }
  624. .col-sm-push-2 {
  625. left: 16.66666667%;
  626. }
  627. .col-sm-push-1 {
  628. left: 8.33333333%;
  629. }
  630. .col-sm-push-0 {
  631. left: 0;
  632. }
  633. .col-sm-offset-12 {
  634. margin-left: 100%;
  635. }
  636. .col-sm-offset-11 {
  637. margin-left: 91.66666667%;
  638. }
  639. .col-sm-offset-10 {
  640. margin-left: 83.33333333%;
  641. }
  642. .col-sm-offset-9 {
  643. margin-left: 75%;
  644. }
  645. .col-sm-offset-8 {
  646. margin-left: 66.66666667%;
  647. }
  648. .col-sm-offset-7 {
  649. margin-left: 58.33333333%;
  650. }
  651. .col-sm-offset-6 {
  652. margin-left: 50%;
  653. }
  654. .col-sm-offset-5 {
  655. margin-left: 41.66666667%;
  656. }
  657. .col-sm-offset-4 {
  658. margin-left: 33.33333333%;
  659. }
  660. .col-sm-offset-3 {
  661. margin-left: 25%;
  662. }
  663. .col-sm-offset-2 {
  664. margin-left: 16.66666667%;
  665. }
  666. .col-sm-offset-1 {
  667. margin-left: 8.33333333%;
  668. }
  669. .col-sm-offset-0 {
  670. margin-left: 0;
  671. }
  672. }
  673. @media (min-width: 992px) {
  674. .col-md-1,
  675. .col-md-10,
  676. .col-md-11,
  677. .col-md-12,
  678. .col-md-2,
  679. .col-md-3,
  680. .col-md-4,
  681. .col-md-5,
  682. .col-md-6,
  683. .col-md-7,
  684. .col-md-8,
  685. .col-md-9 {
  686. float: left;
  687. }
  688. .col-md-12 {
  689. width: 100%;
  690. }
  691. .col-md-11 {
  692. width: 91.66666667%;
  693. }
  694. .col-md-10 {
  695. width: 83.33333333%;
  696. }
  697. .col-md-9 {
  698. width: 75%;
  699. }
  700. .col-md-8 {
  701. width: 66.66666667%;
  702. }
  703. .col-md-7 {
  704. width: 58.33333333%;
  705. }
  706. .col-md-6 {
  707. width: 50%;
  708. }
  709. .col-md-5 {
  710. width: 41.66666667%;
  711. }
  712. .col-md-4 {
  713. width: 33.33333333%;
  714. }
  715. .col-md-3 {
  716. width: 25%;
  717. }
  718. .col-md-2 {
  719. width: 16.66666667%;
  720. }
  721. .col-md-1 {
  722. width: 8.33333333%;
  723. }
  724. .col-md-pull-12 {
  725. right: 100%;
  726. }
  727. .col-md-pull-11 {
  728. right: 91.66666667%;
  729. }
  730. .col-md-pull-10 {
  731. right: 83.33333333%;
  732. }
  733. .col-md-pull-9 {
  734. right: 75%;
  735. }
  736. .col-md-pull-8 {
  737. right: 66.66666667%;
  738. }
  739. .col-md-pull-7 {
  740. right: 58.33333333%;
  741. }
  742. .col-md-pull-6 {
  743. right: 50%;
  744. }
  745. .col-md-pull-5 {
  746. right: 41.66666667%;
  747. }
  748. .col-md-pull-4 {
  749. right: 33.33333333%;
  750. }
  751. .col-md-pull-3 {
  752. right: 25%;
  753. }
  754. .col-md-pull-2 {
  755. right: 16.66666667%;
  756. }
  757. .col-md-pull-1 {
  758. right: 8.33333333%;
  759. }
  760. .col-md-pull-0 {
  761. right: 0;
  762. }
  763. .col-md-push-12 {
  764. left: 100%;
  765. }
  766. .col-md-push-11 {
  767. left: 91.66666667%;
  768. }
  769. .col-md-push-10 {
  770. left: 83.33333333%;
  771. }
  772. .col-md-push-9 {
  773. left: 75%;
  774. }
  775. .col-md-push-8 {
  776. left: 66.66666667%;
  777. }
  778. .col-md-push-7 {
  779. left: 58.33333333%;
  780. }
  781. .col-md-push-6 {
  782. left: 50%;
  783. }
  784. .col-md-push-5 {
  785. left: 41.66666667%;
  786. }
  787. .col-md-push-4 {
  788. left: 33.33333333%;
  789. }
  790. .col-md-push-3 {
  791. left: 25%;
  792. }
  793. .col-md-push-2 {
  794. left: 16.66666667%;
  795. }
  796. .col-md-push-1 {
  797. left: 8.33333333%;
  798. }
  799. .col-md-push-0 {
  800. left: 0;
  801. }
  802. .col-md-offset-12 {
  803. margin-left: 100%;
  804. }
  805. .col-md-offset-11 {
  806. margin-left: 91.66666667%;
  807. }
  808. .col-md-offset-10 {
  809. margin-left: 83.33333333%;
  810. }
  811. .col-md-offset-9 {
  812. margin-left: 75%;
  813. }
  814. .col-md-offset-8 {
  815. margin-left: 66.66666667%;
  816. }
  817. .col-md-offset-7 {
  818. margin-left: 58.33333333%;
  819. }
  820. .col-md-offset-6 {
  821. margin-left: 50%;
  822. }
  823. .col-md-offset-5 {
  824. margin-left: 41.66666667%;
  825. }
  826. .col-md-offset-4 {
  827. margin-left: 33.33333333%;
  828. }
  829. .col-md-offset-3 {
  830. margin-left: 25%;
  831. }
  832. .col-md-offset-2 {
  833. margin-left: 16.66666667%;
  834. }
  835. .col-md-offset-1 {
  836. margin-left: 8.33333333%;
  837. }
  838. .col-md-offset-0 {
  839. margin-left: 0;
  840. }
  841. }
  842. @media (min-width: 1200px) {
  843. .col-lg-1,
  844. .col-lg-10,
  845. .col-lg-11,
  846. .col-lg-12,
  847. .col-lg-2,
  848. .col-lg-3,
  849. .col-lg-4,
  850. .col-lg-5,
  851. .col-lg-6,
  852. .col-lg-7,
  853. .col-lg-8,
  854. .col-lg-9 {
  855. float: left;
  856. }
  857. .col-lg-12 {
  858. width: 100%;
  859. }
  860. .col-lg-11 {
  861. width: 91.66666667%;
  862. }
  863. .col-lg-10 {
  864. width: 83.33333333%;
  865. }
  866. .col-lg-9 {
  867. width: 75%;
  868. }
  869. .col-lg-8 {
  870. width: 66.66666667%;
  871. }
  872. .col-lg-7 {
  873. width: 58.33333333%;
  874. }
  875. .col-lg-6 {
  876. width: 50%;
  877. }
  878. .col-lg-5 {
  879. width: 41.66666667%;
  880. }
  881. .col-lg-4 {
  882. width: 33.33333333%;
  883. }
  884. .col-lg-3 {
  885. width: 25%;
  886. }
  887. .col-lg-2 {
  888. width: 16.66666667%;
  889. }
  890. .col-lg-1 {
  891. width: 8.33333333%;
  892. }
  893. .col-lg-pull-12 {
  894. right: 100%;
  895. }
  896. .col-lg-pull-11 {
  897. right: 91.66666667%;
  898. }
  899. .col-lg-pull-10 {
  900. right: 83.33333333%;
  901. }
  902. .col-lg-pull-9 {
  903. right: 75%;
  904. }
  905. .col-lg-pull-8 {
  906. right: 66.66666667%;
  907. }
  908. .col-lg-pull-7 {
  909. right: 58.33333333%;
  910. }
  911. .col-lg-pull-6 {
  912. right: 50%;
  913. }
  914. .col-lg-pull-5 {
  915. right: 41.66666667%;
  916. }
  917. .col-lg-pull-4 {
  918. right: 33.33333333%;
  919. }
  920. .col-lg-pull-3 {
  921. right: 25%;
  922. }
  923. .col-lg-pull-2 {
  924. right: 16.66666667%;
  925. }
  926. .col-lg-pull-1 {
  927. right: 8.33333333%;
  928. }
  929. .col-lg-pull-0 {
  930. right: 0;
  931. }
  932. .col-lg-push-12 {
  933. left: 100%;
  934. }
  935. .col-lg-push-11 {
  936. left: 91.66666667%;
  937. }
  938. .col-lg-push-10 {
  939. left: 83.33333333%;
  940. }
  941. .col-lg-push-9 {
  942. left: 75%;
  943. }
  944. .col-lg-push-8 {
  945. left: 66.66666667%;
  946. }
  947. .col-lg-push-7 {
  948. left: 58.33333333%;
  949. }
  950. .col-lg-push-6 {
  951. left: 50%;
  952. }
  953. .col-lg-push-5 {
  954. left: 41.66666667%;
  955. }
  956. .col-lg-push-4 {
  957. left: 33.33333333%;
  958. }
  959. .col-lg-push-3 {
  960. left: 25%;
  961. }
  962. .col-lg-push-2 {
  963. left: 16.66666667%;
  964. }
  965. .col-lg-push-1 {
  966. left: 8.33333333%;
  967. }
  968. .col-lg-push-0 {
  969. left: 0;
  970. }
  971. .col-lg-offset-12 {
  972. margin-left: 100%;
  973. }
  974. .col-lg-offset-11 {
  975. margin-left: 91.66666667%;
  976. }
  977. .col-lg-offset-10 {
  978. margin-left: 83.33333333%;
  979. }
  980. .col-lg-offset-9 {
  981. margin-left: 75%;
  982. }
  983. .col-lg-offset-8 {
  984. margin-left: 66.66666667%;
  985. }
  986. .col-lg-offset-7 {
  987. margin-left: 58.33333333%;
  988. }
  989. .col-lg-offset-6 {
  990. margin-left: 50%;
  991. }
  992. .col-lg-offset-5 {
  993. margin-left: 41.66666667%;
  994. }
  995. .col-lg-offset-4 {
  996. margin-left: 33.33333333%;
  997. }
  998. .col-lg-offset-3 {
  999. margin-left: 25%;
  1000. }
  1001. .col-lg-offset-2 {
  1002. margin-left: 16.66666667%;
  1003. }
  1004. .col-lg-offset-1 {
  1005. margin-left: 8.33333333%;
  1006. }
  1007. .col-lg-offset-0 {
  1008. margin-left: 0;
  1009. }
  1010. }
  1011. /*2.2 响应式隐藏显示
  1012. Name: style_Layout
  1013. Explain: 左右两栏|左中右三栏|上中下
  1014. Last Modify: guojunhui
  1015. */
  1016. .visible-xs,
  1017. .visible-sm,
  1018. .visible-md,
  1019. .visible-lg,
  1020. .visible-xs-block,
  1021. .visible-xs-inline,
  1022. .visible-xs-inline-block,
  1023. .visible-sm-block,
  1024. .visible-sm-inline,
  1025. .visible-sm-inline-block,
  1026. .visible-md-block,
  1027. .visible-md-inline,
  1028. .visible-md-inline-block,
  1029. .visible-lg-block,
  1030. .visible-lg-inline,
  1031. .visible-lg-inline-block {
  1032. display: none !important;
  1033. }
  1034. @media (max-width: 767px) {
  1035. .visible-xs {
  1036. display: block !important;
  1037. }
  1038. table.visible-xs {
  1039. display: table;
  1040. }
  1041. tr.visible-xs {
  1042. display: table-row !important;
  1043. }
  1044. th.visible-xs,
  1045. td.visible-xs {
  1046. display: table-cell !important;
  1047. }
  1048. .hidden-xs {
  1049. display: none !important;
  1050. }
  1051. .visible-xs-block {
  1052. display: block !important;
  1053. }
  1054. .visible-xs-inline {
  1055. display: inline !important;
  1056. }
  1057. .visible-xs-inline-block {
  1058. display: inline-block !important;
  1059. }
  1060. }
  1061. @media (min-width: 768px) and (max-width: 991px) {
  1062. .visible-sm {
  1063. display: block !important;
  1064. }
  1065. table.visible-sm {
  1066. display: table;
  1067. }
  1068. tr.visible-sm {
  1069. display: table-row !important;
  1070. }
  1071. th.visible-sm,
  1072. td.visible-sm {
  1073. display: table-cell !important;
  1074. }
  1075. .hidden-sm {
  1076. display: none !important;
  1077. }
  1078. .visible-sm-block {
  1079. display: block !important;
  1080. }
  1081. .visible-sm-inline {
  1082. display: inline !important;
  1083. }
  1084. .visible-sm-inline-block {
  1085. display: inline-block !important;
  1086. }
  1087. }
  1088. @media (min-width: 992px) and (max-width: 1199px) {
  1089. .visible-md {
  1090. display: block !important;
  1091. }
  1092. table.visible-md {
  1093. display: table;
  1094. }
  1095. tr.visible-md {
  1096. display: table-row !important;
  1097. }
  1098. th.visible-md,
  1099. td.visible-md {
  1100. display: table-cell !important;
  1101. }
  1102. .hidden-md {
  1103. display: none !important;
  1104. }
  1105. .visible-md-block {
  1106. display: block !important;
  1107. }
  1108. .visible-md-inline {
  1109. display: inline !important;
  1110. }
  1111. .visible-md-inline-block {
  1112. display: inline-block !important;
  1113. }
  1114. }
  1115. @media (min-width: 1200px) {
  1116. .visible-lg {
  1117. display: block !important;
  1118. }
  1119. table.visible-lg {
  1120. display: table;
  1121. }
  1122. tr.visible-lg {
  1123. display: table-row !important;
  1124. }
  1125. th.visible-lg,
  1126. td.visible-lg {
  1127. display: table-cell !important;
  1128. }
  1129. .hidden-lg {
  1130. display: none !important;
  1131. }
  1132. .visible-lg-block {
  1133. display: block !important;
  1134. }
  1135. .visible-lg-inline {
  1136. display: inline !important;
  1137. }
  1138. .visible-lg-inline-block {
  1139. display: inline-block !important;
  1140. }
  1141. }
  1142. .visible-print {
  1143. display: none !important;
  1144. }
  1145. .visible-print-block {
  1146. display: none !important;
  1147. }
  1148. .visible-print-inline {
  1149. display: none !important;
  1150. }
  1151. .visible-print-inline-block {
  1152. display: none !important;
  1153. }
  1154. @media print {
  1155. .visible-print {
  1156. display: block !important;
  1157. }
  1158. table.visible-print {
  1159. display: table;
  1160. }
  1161. tr.visible-print {
  1162. display: table-row !important;
  1163. }
  1164. th.visible-print,
  1165. td.visible-print {
  1166. display: table-cell !important;
  1167. }
  1168. .visible-print-block {
  1169. display: block !important;
  1170. }
  1171. .visible-print-inline {
  1172. display: inline !important;
  1173. }
  1174. .visible-print-inline-block {
  1175. display: inline-block !important;
  1176. }
  1177. .hidden-print {
  1178. display: none !important;
  1179. }
  1180. }