Bootstrap 并排网格，在固定空间中答案

【问题标题】：Boostrap side by side grid, in fixed spaceBootstrap 并排网格，在固定空间中
【发布时间】：2015-09-14 20:57:06
【问题描述】：

我正在尝试将图片打包在

<div class="social block"> ... </div>

看起来并排，就像一个网格。我也在尝试让它完全流畅，并且可以自我调整（因此是 Bootstrap）。

我想要两行总共两行，每行有 3 个图标，所有图像都接触到侧面。

目前看起来像这样：http://postimg.org/image/z0g80wf0z/

这是我的 CSS：

// Place all the styles related to the Pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
p{
color: rgb(51, 51, 51);
display: block;
font-family: Roboto, sans-serif;
font-size: 21px;
font-weight: 100;
height: 90px;
line-height: 30px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 30px;
text-align: center;}

p, h1 { margin: 0 }

html {
position:relative;
height:100%;
width:100%;
}
html,body
{
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
body {
position:absolute;
min-width:100%;
min-height:100%;
}

.window {
    height:700px;
    width:100%;

    //border-top: solid 1px #000; //temp test
}
.full{
    width:100%;

}

.main-home {
 background: url('http://i58.tinypic.com/2v34yub.jpg') no-repeat center center;
 background-size:cover;
}

.main-about {
    background: url('https://static.pexels.com/photos/1440/city-road-street-buildings.jpg') no-repeat center center;
    background-size:cover;

}

.window-support {
padding: 80px 0;
text-align: center;
}

.content {
    top:225px;
  position:relative;
  text-align: center;
  color: white;
}

h1.headline {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 50px;
}

h2.headline {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 35px;
}


.btn.sharp {
border-radius:0;
border:none;
font-size: 14px;
}

.menu-icon {
    top:30px;
    left:30px;
    position:absolute;
    margin: 0;

}

.col-centered{
    float: none;
    margin: 0 auto;
}

.halfBack {
    width: 50%;
    height:500px;

}

.grid-text {
    padding-top:205px;
}

.text-background {
    height: 2em;
    width: 100%;
    background-color:#000;
    line-height:2em;
    vertical-align:middle;
    text-align:center;
    opacity:0.7;
}

#footer {
    background-color: #f9f9f9;
    border-top: solid 1px #F5F5F5;
        height:50px;
    text-align: center;
        line-height:50px;
        vertical-align:middle;
    color: #ccc;
        position:absolute;
        bottom:-50px;
    width:100%;
}

#abt-grid-3 {
   background: url('https://paulkporterphotography.files.wordpress.com/2015/04/20141210-distillery-31.jpg') no-repeat center center;
   height:500px;
    background-size:cover;
    border: solid 2px #F5F5F5;
}

#abt-grid-1{
    background:url('https://i0.wp.com/upload.wikimedia.org/wikipedia/commons/1/14/1_yonge_street_toronto_winter_2010_panorama.jpg') no-repeat center center;
    height:500px;
    background-size:cover;
    border: solid 2px #F5F5F5;
}
#abt-grid-2{
    background: url('http://ryersonbuilds.ryerson.ca/wp-content/uploads/2013/12/X6C61871.jpg') no-repeat center center;
    height:500px;
    border: solid 2px #F5F5F5;
    background-size:cover;
}

#leftHalf {
   background: url(images/bg-1.jpg);
   width: 70%;
   position: absolute;
   left: 0px;
   height: 100%;
}
#rightHalf {
   background: url(images/bg-2.jpg);
   width: 30%;
   position: absolute;
   right: 0px;
   height: 100%;
}

.socialBlock{
    border: solid 1px #CCC;
    height: 300px;
    width:100%;
}

.edgeWrap {
    margin:0px;
    padding:0;
    width:100%;
}
.socialBlock {

    .row {border:solid 1px #000;}
    .col-md-4 {}
    .container{width:auto;}

}

这里是html：

<!DOCTYPE html>
<html>

  <!-- start page -->
<div id="leftHalf" class="halfBack">
  <div class="window main-home">
     <div class="container edgeWrap">
          <!-- content -->
          <div class="row">
            <div class="content col-md-12">
              <h1 class="headfont text-center white" data-sr="flip 65deg over 2s" >Hi, I'm Satchel.</h1>
                    <p data-sr="flip 65deg over 2s"> <%= link_to 'About Me', '/about', class:'btn btn-primary sharp btn-lg', role:'button' %>
             <%= link_to 'The Blog', '/blog', class:'btn btn-primary sharp btn-lg', role:'button', target:'_blank' %>
              </p>

            </div>
          </div>
    </div>
  </div>
</div>

<div id = "rightHalf" class="halfBack">
  <div class="container edgeWrap">
    <div class="row">
      <div class="col-md-12">
        <div class="socialBlock">
          <div class="container">
          <div class="row">
            <div class="col-md-4"> <%= image_tag('icon/youtube-play.png',class:'img-responsive') %> </div>
            <div class="col-md-4"> <%= image_tag('icon/twitter.png', class:'img-responsive') %> </div>
            <div class="col-md-4"> <%= image_tag('icon/twitter.png', class:'img-responsive') %> </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>
</html>

这有点奇怪，因为我正在尝试进行拆分（最初是两半，现在是 3/10 和 7/10）。

感谢任何帮助！

【问题讨论】：

所以你想要每行三个图标，但你为每个项目使用col-md-2？
不，我在发布之前只是在玩弄它。您可以使用 col-*-4 它不会有所作为。即使有或没有 class="img-responsive"
啊，我明白了。好吧，当我回到家时，我会尝试制作小提琴，但到那时其他人可能会解决它。 ;)
谢谢，希望哈哈！
你有没有想过用 flexbox 代替 bootstrap 的网格系统？

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

挎包您好。
看看这个 Fiddle 看看它是否对你有帮助。
我只是想稍微简化一下，所以如果你想在这里运行 Bootstrap 方式。
你总是可以看到它是如何工作的，并用你自己的 css 替换 col-xs-xx。如果你不想使用 Bootstrap。

您说您希望有两行，每行 3 张图片全部接触。
我是这样做的。

<div class="col-xs-3">
        <div class="row"> 
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        </div>

        <div>
        <div class="row padtop">  
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        </div>
        </div>
    </div>

【讨论】：

感谢@AngularJR！这正是我想要的！