Bootstrap列对齐

时间：2016-01-20 19:28:09

标签： twitter-bootstrap

伙计们，我想向我的公司制作价格页面

Link to hosting page

负面时刻是它通常不会在手机和平​​板电脑，PC上看。我希望所有的圆圈和圆柱都能在另一个圆圈和圆柱下面。我制作，尝试了表格，但没有任何帮助

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

1 个答案:

答案 0 :(得分：0)

尝试为小型设备（xs或sm）使用不同的col / grid维度

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

必须对所有类似的部分重复这一点。

对于蓝色方块你必须

 <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，并重复三个方格..

相关问题
最新问题