Html 在固定的空间中，并排设置栅格_Html_Css_Ruby On Rails_Twitter Bootstrap

Html 在固定的空间中，并排设置栅格

html css ruby-on-rails twitter-bootstrap

Html 在固定的空间中，并排设置栅格,html,css,ruby-on-rails,twitter-bootstrap,Html,Css,Ruby On Rails,Twitter Bootstrap,我正试着把照片装进去 <div class="social block"> ... </div> 以下是html： <!DOCTYPE html> <html>  <div id="leftHalf" class="halfBack"> <div class="window main-home"> <div class="container edg

我正试着把照片装进去

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

以下是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

感谢您的帮助

书包你好。看看这个，看看它是否对你有帮助。我只是想简化一下，如果你想在这里运行引导程序。您可以随时看到它是如何工作的，并用您自己的css替换列xs xx。如果您不想使用引导

你说你想要有两行，每行有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>

所以你希望每行有三个图标，但你对每一个项目都使用col-md-2？不，我只是在发布之前胡闹而已。您可以使用col-*-4，这不会有什么区别。即使有或没有课堂=我明白了。嗯，我到家后会尽力拉小提琴，但到时候可能会有人来解决；谢谢，哈哈，希望如此！你想过用flexbox代替bootstrap的网格系统吗？谢谢@AngularJR！那正是我要找的！

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