Question

我在使用Bootstrap列时遇到了一些问题，但它们并没有像他们想象的那样工作。在下面的图片中，4个配置文件框必须居中...就像3列在“智能和创意”部分中居中一样。不幸的是我无法链接到一个jsfiddle但我提供了代码供你查看图像下方，在代码部分向下滚动查看css。

<!-- smart and creative -->
    <div class="smart-creative">
      <div class="row">
        <div class="container">
          <div class="title col-xs-12">
            <h2>Smart &amp; Creative</h2>
            <p>This is why you will use it :)</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div class="circles col-md-4 col-sm-4">
            <div class="circle1"></div>
            <h4>Multi purpose</h4>
            <p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p>
          </div>
          <div class="circles col-md-4 col-sm-4">
            <div class="circle2"></div>
            <h4>Flat UI</h4>
            <p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p>
          </div>
          <div class="circles col-md-4 col-sm-4">
            <div class="circle3"></div>
            <h4>Creative Design</h4>
            <p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Team -->
    <div class="team">
      <div class="row">
        <div class="container">
          <div class="team-title col-md-12">
            <h2>Talented &amp; Experts</h2>
            <p>This is our team</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div class="profile-wrapper">
            <div class="profiles pic1 col-md-3 col-sm-3">
              <div class="pic-holder">

              </div>
              <div class="desc">
                <h5>Mahmoud Baghagho<h5>
                <p>Senior UI Designer</p>
              </div>
              <div class="twitter-button">
                <span class="fa fa-twitter">Follow</span>
              </div>
            </div>
            <div class="profiles pic1 col-md-3 col-sm-3">
              <div class="pic-holder">

              </div>
              <div class="desc">
                <h5>Mahmoud Baghagho<h5>
                <p>Senior UI Designer</p>
              </div>
              <div class="twitter-button">
                <span class="fa fa-twitter">Follow</span>
              </div>
            </div>
            <div class="profiles pic1 col-md-3 col-sm-3">
              <div class="pic-holder">

              </div>
              <div class="desc">
                <h5>Mahmoud Baghagho<h5>
                <p>Senior UI Designer</p>
              </div>
              <div class="twitter-button">
                <span class="fa fa-twitter">Follow</span>
              </div>
            </div>
            <div class="profiles pic1 col-md-3 col-sm-3">
              <div class="pic-holder">

              </div>
              <div class="desc">
                <h5>Mahmoud Baghagho<h5>
                <p>Senior UI Designer</p>
              </div>
              <div class="twitter-button">
                <span class="fa fa-twitter">Follow</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>






  CSS
// Smart and Creative
.smart-creative{
  background-color: $theme1-color;
  color: white;
  .title{
    text-align: center;
    padding-top: 10px;
    p{
      color: $header-color;
    }
  }
  .circles{
    padding-top: 25px;
    h4,p{
      text-align: center;
    }
    p{
      color: $header-color;
    }
    .css-for-circle{
      height: 100px;
      width: 100px;
      background-color: $header-color;
      border-radius: 50px;
      background-position: center;
      background-repeat: no-repeat;
      margin: 0 auto;
    }
    .circle1{
      background-image: url("../imgs/multi.png");
      @extend .css-for-circle;
    }
    .circle2{
      background-image: url("../imgs/flat.png");
      @extend .css-for-circle;
    }
    .circle3{
      background-image: url("../imgs/creative.png");
      @extend .css-for-circle;
    }
  }
}


// Team
.team{
  background-color: $theme2-color;
  .team-title{
    h2,p{
      text-align: center;
    }
  }
  .profile-wrapper{
    margin: 0 auto;
    width: 95%;
    overflow: hidden;
    .profiles{
      max-width: 230px;
      height: 341px;
      background-color: white;
      border-radius: 5px;
      .pic-holder{
        max-width: 164px;
        height: 164px;
        border-radius: 82px;
        background-color: $theme2-color;
        margin: 0 auto;
        position: relative;
        top: 25px;
        box-shadow: inset 3px 3px 6px -2px #48804B;
        -moz-box-shadow: inset 3px 3px 6px -2px #48804B;
        -webkit-box-shadow: inset 3px 3px 6px -2px #48804B;
        -o-box-shadow: inset 3px 3px 6px -2px #48804B;
        background-image: url("http://placehold.it/147x147");
        background-repeat: no-repeat;
        background-size: 90%;
        background-position: center;
      }
      .desc{
        padding: 45px 0 20px 0;
        h5,p{
          text-align: center;
        }
      }
      .twitter-button{
        max-width: 204px;
        height: 43px;
        background-color: $theme2-color;
        margin: 0 auto;
        border-radius: 2px;
        .fa-twitter{
          font-size: 35px;
          color: white;
        }
      }
    }
  }
}

Answer 1

这个div：

<div class="container">

应该是持有者：

<div class="row">

正确的方法，例如：

<div class="container">
   <div class="row">
      <div class="title col-xs-12">
          <h2>Smart &amp; Creative</h2>
          <p>This is why you will use it :)</p>
      </div>
   </div>
</div>

Answer 2

首先，行应该是INSIDE容器。

但你真正的问题是在这里设置最大宽度：

.profiles{max-width: 230px;}

你不会让列扩展到它们的自然宽度。

Answer 3

.team .profile-wrapper .profiles {
 max-width: 230px; 
}

使列宽小于它应该是。我已经为你创建了代码泛，请检查
http://codepen.io/payalpatel2299/pen/MbRwxo

Bootstrap列无法正常工作

3 个答案: