pure-u-1-7 не работает в сочетании с sm, md, lg, xl - PullRequest
Новая
       37

pure-u-1-7 не работает в сочетании с sm, md, lg, xl

0 голосов
/ 27 сентября 2019 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your page title</title>
  <link rel="stylesheet" href="unpkg.com/purecss@1.0.1/build/pure-min.css">
  <link rel="stylesheet" href="grid.css">
  <link rel="stylesheet" href="unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" />
</head>

<body>
<div class="pure-g">
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div> 
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
</div>
</body>
</html>

Я хочу 7-колоночную сетку.Я могу добиться этого с помощью Purecss "pure-u-1-7".Но в сочетании с sm, md, lg, xl это не работает.Это становится одним столбцом.Я хочу 7 столбец, когда он просматривается на маленьком устройстве, он должен стать одним столбцом.Как это "pure-u-1-7 Pure-u-sm-1-1"

1 Ответ

0 голосов
/ 27 сентября 2019

Я тестировал его в Google Chrome и Firefox, и он хорошо работает. Надеюсь, это то, что вы хотите 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Your page title</title>
 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
 </head>
 <body>
 <style>
    p {
        text-align:center;
    }
    #mainDiv{
        width:100%;
    }
    #subDiv1{
        width:85.7%;
    }
    #subDiv2{
        width:14.3%;
    }
 </style>
 <div class="pure-g" id="mainDiv">
     <div id="subDiv1" class="pure-u-1-2">
             <div class="pure-g">
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 1</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 2</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 3</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 4</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 5</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 6</p>
                 </div>

            </div>
     </div>
         <div id="subDiv2" class="pure-u-1-2 ad">
            <p>test 7</p>
         </div>
 </div>
 </body>
 </html>
...