引导列排列

家伙，我想和价格网页对我公司引导列排列

负弯矩的是，它不`吨通常只盯着手机和平板电脑，PC机上。我希望所有的圈子和柱子都能得到另一个。我提出，试图表TR TD TD TD TD ...没有什么帮助

<!DOCTYPE html> 
<html > 
    <head> 
    <meta charset="UTF-8"> 
    <title>fixPoint Cenu Lapa</title> 



    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> 
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'> 
<link rel='stylesheet prefetch' href='http://daneden.github.io/animate.css/animate.min.css'> 

     <link rel="stylesheet" href="css/style.css"> 

    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 


    </head> 

    <body> 


    <div class=row> 
    <div id="wrapper"> 
    <div class="container"> 
     <div class="row"> 
       <div class="col-xs-3 col-sm-3 col-md-3"> 
        <div class="circle c1 img-circle"> 
         <h4 class="blue">Bezmaksas diagnostika</h4> 
         <span class="icon blue"><i class="fa fa-eur"></i></span> 
         <span class="price-large blue">0</span> 
         <span class="price-small">,00</span> 
         <p>Bezmaksas apskatīsim Jūsu ierīci</p> 
         <!-- <button type="button" class="btn btn-info">Choose</button> --> 
        </div> 
       </div><!-- .Col-md-3 ends here --> 

       <div class="col-xs-3 col-sm-3 col-md-3"> 
        <div class="circle c2 img-circle"> 
         <h4 class="yellow">Atra diagnostika</h4> 
         <br> 
         <span class="icon yellow"><i class="fa fa-clock-o fa-5x"></i></span> 
         <br> 
         <br> 
         <!-- <span class="price-large yellow">24</span> 
         <span class="price-small">,90</span> --> 
         <p>Parasti darbs tiek veikts 1-2 darba dienas laikā</p> 
         <!-- <button type="button" class="btn btn-warning">Choose</button> --> 
        </div> 
       </div><!-- .Col-md-3 ends here --> 

      <div class="col-xs-3 col-sm-3 col-md-3"> 
        <div class="circle c3 img-circle"> 
         <h4 class="green">Pilna datoru profilakse</h4> 
         <span class="icon green"><i class="fa fa-eur"></i></span> 
         <span class="price-large green">3</span> 
         <span class="price-small">,90*</span> 
         <p>*Pilna datora profilakse sadarbībā ar ZIZU.LV</p> 
         <a href="#" class="btn btn-success">Pasūtūt</a> 
        </div> 
       </div><!-- .Col-md-3 ends here --> 

      <div class="col-xs-3 col-sm-3 col-md-3"> 
        <div class="circle c4 img-circle"> 
         <h4 class="red">Meistera izsaukšana</h4> 
         <span class="icon red align:left"><i class="fa fa-eur"></i></span> 
         <span class="price-large red">15</span> 
         <span class="price-small">/st.</span> 

         <p>Bezmaksas izsaukšana, maksa pa stundām</p> 
         <a href="#" class="btn btn-danger">Izsaukt</a> 
        </div> 
       </div><!-- .Col-md-3 ends here --> 
     </div><!-- .Container ends here --> 
    </div><!-- .Row ends here --> 
</div> 

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
</div> 
<br><br><br> 

    <div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-4"><div class='pricing animated swing'> 
    <div class='thumbnail animated pulse infinite'> 
    <div class='fa fa-desktop'></div> 
    </div> 
    <div class='title1'> 
    Datora remonts 
    </div> 
    <div class='content1'> 
    <div class='sub-title'> 
     €5/pakalpojums 

    </div> 
    <ul> 
     <li> 
     <div class='fa fa-check'></div> 
     Komponentes nomainīšana 
     </li> 
     <li> 
     <div class='fa fa-check'></div> 
     Komponentes testēšana 
     </li> 
     <li> 
     <div class='fa fa-check'></div> 
     Tehniskais sledziens 
     </li> 
     <!-- <li> 
     <div class='fa fa-close'></div> 
     Complete Access To All Plugins 
     </li> 
     <li> 
     <div class='fa fa-close'></div> 
     Layered Photoshop Files 
     </li> --> 
     <li> 
     <div class='fa fa-close'></div> 
     Garantija uz darbu - 1 mēnesis 
     </li> 
    </ul> 
    <a href='#'> 
     Kā mums atrast 
    </a> 
    </div> 
    <div class='clickMe'> 
    Nospiedi! 
    </div> 
</div></div> 



    <div class="col-xs-6 col-sm-6 col-md-4"><div class='pricing animated swing'> 
    <div class='thumbnail animated pulse infinite'> 
    <div class='fa fa-laptop'></div> 
    </div> 
    <div class='title2'> 
    Portatīva datora remonts 
    </div> 
    <div class='content2'> 
    <div class='sub-title'> 
     €5/pakalpojums 

    </div> 
    <ul> 
     <li> 
     <div class='fa fa-check'></div> 
     Komponentes nomainīšana 
     </li> 
     <li> 
     <div class='fa fa-check'></div> 
     Komponentes testēšana 
     </li> 
     <li> 
     <div class='fa fa-check'></div> 
     Tehniskais sledziens 
     </li> 
     <!-- <li> 
     <div class='fa fa-close'></div> 
     Complete Access To All Plugins 
     </li> 
     <li> 
     <div class='fa fa-close'></div> 
     Layered Photoshop Files 
     </li> --> 
     <li> 
     <div class='fa fa-close'></div> 
     Garantija uz darbu - 1 mēnesis 
     </li> 
    </ul> 
    <a href='#'> 
     Kā mums atrast 
    </a> 
    </div> 
    <div class='clickMe'> 
    Nospiedi! 
    </div> 
</div></div> 


    <div class="col-xs-6 col-sm-6 col-md-4"><div class='pricing animated swing'> 
    <div class='thumbnail animated pulse infinite'> 
    <div class='fa fa-tablet'></div> 
    </div> 
    <div class='title3'> 
    Planšetdatora remonts 
    </div> 
    <div class='content3'> 
    <div class='sub-title'> 
     €10 darbs + komponentes cena* 

    </div> 
    <ul> 
     <li> 
     <div class='fa fa-check'></div> 
     *nav obligāti, var būt softa problemas 
     </li> 
     <li> 
     <div class='fa fa-check'></div> 
     Ekrāna nomaiņa 
     </li> 
     <li> 
     <div class='fa fa-check'></div> 
     Barošanas ligzdas remonts 
     </li> 
     <!-- <li> 
     <div class='fa fa-close'></div> 
     test 
     </li> 
     <li> 
     <div class='fa fa-close'></div> 
     Layered Photoshop Files 
     </li> --> 
     <li> 
     <div class='fa fa-close'></div> 
     Garantija uz darbu - 1 mēn. 
     </li> 
    </ul> 
    <a href='#'> 
     Kā mums atrast 
    </a> 
    </div> 
    <div class='clickMe'> 
    Nospiedi 
    </div> 
</div></div> 
</div> 






    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

     <script src="js/index.js"></script> 




    </body> 
</html>

和CSS：

body { 
    background: #df4f32 url("http://33.media.tumblr.com/53b1b2ec56944c977cdd7ee10a9b4ba4/tumblr_n8zm0yzydj1st5lhmo1_1280.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    font-family: "Roboto"; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
body::before { 
    content: ''; 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    background: #DF4F32; 
    /* IE Fallback */ 
    background: rgba(44, 62, 80, 0.9); 
    width: 100%; 
    height: 100%; 
} 
.pricing { 
    position: absolute; 
    background: #3498db; 
    width: 280px; 
    top: 50%; 
    left: 50%; 
    margin: -117px 0 0 -140px; 
    padding: 40px 0 20px; 
    color: #fff; 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 
} 
.pricing .thumbnail { 
    background: #fff; 
    /* IE Fall */ 
    background: rgba(255, 255, 255, 0.2); 
    display: block; 
    width: 90px; 
    height: 90px; 
    margin: 0 auto; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%; 
    font-size: 36px; 
    line-height: 90px; 
    text-align: center; 
} 
.pricing .title { 
    cursor: pointer; 
    background: #2980b9; 
    margin: 40px 0 0; 
    padding: 10px; 
    font-size: 18px; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: 700; 
} 

.pricing .title1 { 
    cursor: pointer; 
    background: #2980b9; 
    margin: 40px 0 0; 
    padding: 10px; 
    font-size: 18px; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: 700; 
} 

.pricing .title2 { 
    cursor: pointer; 
    background: #2980b9; 
    margin: 40px 0 0; 
    padding: 10px; 
    font-size: 18px; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: 700; 
} 

.pricing .title3 { 
    cursor: pointer; 
    background: #2980b9; 
    margin: 40px 0 0; 
    padding: 10px; 
    font-size: 18px; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: 700; 
} 
/* content1 */ 
.pricing .content1 { 
    display: none; 
} 
.pricing .content1 .sub-title { 
    background: #eee; 
    padding: 10px; 
    color: #666; 
    font-size: 14px; 
    font-weight: 700; 
    text-align: center; 
} 
.pricing .content1 ul { 
    list-style: none; 
    background: #fff; 
    margin: 0; 
    padding: 0; 
    color: #666; 
    font-size: 14px; 
} 
.pricing .content1 ul li { 
    padding: 10px 20px; 
} 
.pricing .content1 ul li:nth-child(2n) { 
    background: #f3f3f3; 
} 
.pricing .content1 ul li .fa { 
    width: 16px; 
    margin-right: 10px; 
    text-align: center; 
} 
.pricing .content1 ul li .fa-check { 
    color: #2ecc71; 
} 
.pricing .content1 ul li .fa-close { 
    color: #e74c3c; 
} 
.pricing .content1 a { 
    display: block; 
    background: #2980b9; 
    max-width: 80px; 
    margin: 0 auto; 
    margin-top: 20px; 
    padding: 10px 15px; 
    color: #fff; 
    font-size: 18px; 
    font-weight: 700; 
    text-align: center; 
    text-decoration: none; 
    -webkit-transition: 0.2s linear; 
    -moz-transition: 0.2s linear; 
    -ms-transition: 0.2s linear; 
    -o-transition: 0.2s linear; 
    transition: 0.2s linear; 
} 
.pricing .content1 a:hover { 
    background: #34495e; 
    /* IE Fallback */ 
    background: rgba(52, 73, 94, 0.7); 
} 
/* content1 end */ 

/* content2 */ 

.pricing .content2 { 
    display: none; 
} 
.pricing .content2 .sub-title { 
    background: #eee; 
    padding: 10px; 
    color: #666; 
    font-size: 14px; 
    font-weight: 700; 
    text-align: center; 
} 
.pricing .content2 ul { 
    list-style: none; 
    background: #fff; 
    margin: 0; 
    padding: 0; 
    color: #666; 
    font-size: 14px; 
} 
.pricing .content2 ul li { 
    padding: 10px 20px; 
} 
.pricing .content2 ul li:nth-child(2n) { 
    background: #f3f3f3; 
} 
.pricing .content2 ul li .fa { 
    width: 16px; 
    margin-right: 10px; 
    text-align: center; 
} 
.pricing .content2 ul li .fa-check { 
    color: #2ecc71; 
} 
.pricing .content2 ul li .fa-close { 
    color: #e74c3c; 
} 
.pricing .content2 a { 
    display: block; 
    background: #2980b9; 
    max-width: 80px; 
    margin: 0 auto; 
    margin-top: 20px; 
    padding: 10px 15px; 
    color: #fff; 
    font-size: 18px; 
    font-weight: 700; 
    text-align: center; 
    text-decoration: none; 
    -webkit-transition: 0.2s linear; 
    -moz-transition: 0.2s linear; 
    -ms-transition: 0.2s linear; 
    -o-transition: 0.2s linear; 
    transition: 0.2s linear; 
} 
.pricing .content2 a:hover { 
    background: #34495e; 
    /* IE Fallback */ 
    background: rgba(52, 73, 94, 0.7); 
} 

/* content 2 end */ 

/* content 3 */ 

.pricing .content3 { 
    display: none; 
} 
.pricing .content3 .sub-title { 
    background: #eee; 
    padding: 10px; 
    color: #666; 
    font-size: 14px; 
    font-weight: 700; 
    text-align: center; 
} 
.pricing .content3 ul { 
    list-style: none; 
    background: #fff; 
    margin: 0; 
    padding: 0; 
    color: #666; 
    font-size: 14px; 
} 
.pricing .content3 ul li { 
    padding: 10px 20px; 
} 
.pricing .content3 ul li:nth-child(2n) { 
    background: #f3f3f3; 
} 
.pricing .content3 ul li .fa { 
    width: 16px; 
    margin-right: 10px; 
    text-align: center; 
} 
.pricing .content3 ul li .fa-check { 
    color: #2ecc71; 
} 
.pricing .content3 ul li .fa-close { 
    color: #e74c3c; 
} 
.pricing .content3 a { 
    display: block; 
    background: #2980b9; 
    max-width: 80px; 
    margin: 0 auto; 
    margin-top: 20px; 
    padding: 10px 15px; 
    color: #fff; 
    font-size: 18px; 
    font-weight: 700; 
    text-align: center; 
    text-decoration: none; 
    -webkit-transition: 0.2s linear; 
    -moz-transition: 0.2s linear; 
    -ms-transition: 0.2s linear; 
    -o-transition: 0.2s linear; 
    transition: 0.2s linear; 
} 
.pricing .content3 a:hover { 
    background: #34495e; 
    /* IE Fallback */ 
    background: rgba(52, 73, 94, 0.7); 
} 

/* content3 end */ 

.clickMe { 
    background: #fff; 
    /* IE Fallback */ 
    background: rgba(255, 255, 255, 0.8); 
    position: absolute; 
    top: 180px; 
    left: -60px; 
    padding: 5px 7px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    color: #3498db; 
    font-size: 10px; 
    text-transform: uppercase; 
    font-weight: 800; 
} 
.clickMe:before { 
    content: ''; 
    position: absolute; 
    top: 6px; 
    right: -5px; 
    width: 0px; 
    height: 0px; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-left: 5 solid #fff; 
    /* IE Fallback */ 
    border-left: 5px solid rgba(255, 255, 255, 0.8); 
} 

@charset "utf-8"; 

    * { 
    padding:0; 
    margin:0; 
    border:0; 
} 
body { 
    background: #d5d5d5; 
    font-family:trebuchet MS; 
    color:#6B6B6B; 
    border: 0 none; 
    margin: 0; 
    font-size:13px; 
    padding: 0; 
} 
#wrapper{ 
    padding: 60px 0px; 
} 
.container{} 
.row{} 
.circle{ 
    background: #ffffff; 
    padding: 35px; 
    text-align: center; 
    height: 250px; 
    width: 250px; 

    transition: all 0.5s; 
    -moz-transition: all 0.5s; /* Firefox 4 */ 
    -webkit-transition: all 0.5s; /* Safari and Chrome */ 
    -o-transition: all 0.5s; /* Opera */ 
} 
.circle h4{ 
    margin: 0; 
    padding: 0; 
} 
.circle p{} 
.circle span{} 
.circle span.icon{ 
} 
.circle span.icon i{ 
    font-size: 48px; 
} 
.circle span.price-large{ 
    font-size: 68px 
} 
.price-small{ 
    font-size: 24px 
} 

.c1:hover{ 
    background: #39b3d7; 
    color: #ffffff; 
} 
.c1 .blue{ 
    color: #39b3d7; 
} 
.c1:hover .blue{ 
    color: #ffffff; 
} 

.c2:hover{ 
    background: #ed9c28; 
    color: #ffffff; 
} 
.c2 .yellow{ 
    color: #ed9c28; 
} 
.c2:hover .yellow{ 
    color: #ffffff; 
} 

.c3:hover{ 
    background: #47a447; 
    color: #ffffff; 
} 
.c3 .green{ 
    color: #47a447; 
} 
.c3:hover .green{ 
    color: #ffffff; 
} 

.c4:hover{ 
    background: #d2322d; 
    color: #ffffff; 
} 
.c4 .red{ 
    color: #d2322d; 
} 
.c4:hover .red{ 
    color: #ffffff; 
}

来源

2016-01-20 Sergejs Jefremovs

尝试使用不同的COL /网格尺寸为小型设备（XS或SM）

  <div class="col-xs-12 col-sm-12 col-md-3"> 
       <div class="circle c1 img-circle"> 
        <h4 class="blue">Bezmaksas diagnostika</h4> 
        <span class="icon blue"><i class="fa fa-eur"></i></span> 
        <span class="price-large blue">0</span> 
        <span class="price-small">,00</span> 
        <p>Bezmaksas apskatīsim Jūsu ierīci</p> 
        <!-- <button type="button" class="btn btn-info">Choose</button> --> 
       </div> 
      </div><!-- .Col-md-3 ends here -->

这个一定要repeted所有类似的一部分。这

和蓝色方块，你必须

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-4"><div class='pricing animated swing'> 
     <div class='thumbnail animated pulse infinite'> 
     <div class='fa fa-desktop'></div> 
     </div> 
     <div class='title1'> Datora remonts </div> 

.........

也是这种变化的XS为6至12再次为三坊..

来源

2016-01-20 19:49:32 scaisEdge

感谢的人，现在圈找，因为我想，但这启用jQuery的collums - 没有。他们是或一个附近的其他，或一个：C（链接http://devtest.eu5.org/） –

你是什么意思，我没有看到任何JQuery的启用在你的代码..似乎是另一个..问题。 ..那么如果我的asnwer是正确的，像你说...请正确率。（接受和/或有用）。如果你有另一个问题的帖子。它作为一个新的..。 – scaisEdge

我启用了JQuery，我的错误:)我的意思是说，所有的圆圈都可以，但是用蓝色的 - 不是。他们没有在手机下拿到另一个，他们被困在另一个之上。现在，如果我不能修复它，虐待隐藏x隐藏sm，并为移动设备制作简单的表格。附：我不能率，而我的评级不是15 –

回答

相关问题