在同一行的引导列中对齐多个元素

Question

我想在引导程序中的同一行内的两列中水平对齐多个项目。可以在下面找到示例 HTML 代码：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
        <h1>Short Heading</h1>
        <p>Some super long content that will push the button far downward so that it will certainly not align with the next column anymore</p>
        <button class="btn btn-primary">Button</button>
    </div>
    <div class="col-sm-6">
        <h1>Super long Heading that requires 2 rows</h1>
        <p>Some short content</p>
        <button class="btn btn-primary">Button</button>
    </div>
  </div>
</div>

或在这个小提琴http://jsfiddle.net/6pYhx/689/

在示例中，我想有 2 个条件

1. header、p 和 button 元素应该在相同的水平高度上。在我的示例中，右侧标题是两行，因此右侧 p 元素比左侧 p 低一行
2. 如果屏幕尺寸缩小，则第 1 列的所有元素应位于彼此正下方，然后是第 2 列的所有元素 -> 我试图通过多行来解决它，但随后您将获得标题 1、标题 2、p 1, p 2, ... 相反，我想要标题 1、p 1、按钮 1，然后是标题 2、p 2、按钮 2

任何想法如何用CSS解决它？

Answer 1

我有三个解决方案。

1. 使用Flexbox的在media >= 768px。

@media (min-width: 768px) {
  .make-it-flex {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-item-1 { order: 1; }
  .flex-item-2 { order: 2; }
  .flex-item-3 { order: 3; }
  .flex-item-4 { order: 4; }
  .flex-item-5 { order: 5; }
  .flex-item-6 { order: 6; }
}

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

<div class="container">
  <h2>Flexbox</h2>
  <div class="row make-it-flex">
    <div class="col-xs-12 col-sm-6 flex-item-1"><div class="well">Header 1</div></div>
    <div class="col-xs-12 col-sm-6 flex-item-3"><div class="well">Paragraph 1<br>has three lines<br>it's true</div></div>
    <div class="col-xs-12 col-sm-6 flex-item-5"><div class="well">Button 1</div></div>
    <div class="col-xs-12 col-sm-6 flex-item-2"><div class="well">Header 2<br>has two lines</div></div>
    <div class="col-xs-12 col-sm-6 flex-item-4"><div class="well">Paragraph 2</div></div>
    <div class="col-xs-12 col-sm-6 flex-item-6"><div class="well">Button 2<br>has two lines</div></div>
  </div>
</div>

http://jsfiddle.net/glebkema/uuLqokhm/

2. 复制数据并为不同的屏幕尺寸制作两种布局。

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

<div class="container visible-xs">
  <h2>Columns</h2>
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="row">
        <div class="col-xs-12"><div class="well">Header 1</div></div>
        <div class="col-xs-12"><div class="well">Paragraph 1<br>has three lines<br>it's true</div></div>
        <div class="col-xs-12"><div class="well">Button 1</div></div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="row">
        <div class="col-xs-12"><div class="well">Header 2<br>has two lines</div></div>
        <div class="col-xs-12"><div class="well">Paragraph 2</div></div>
        <div class="col-xs-12"><div class="well">Button 2<br>has two lines</div></div>
      </div>
    </div>
  </div>
</div>

<div class="container hidden-xs"> 
  <h2>Lines</h2>
  <div class="row">
    <div class="col-xs-12 col-sm-6"><div class="well">Header 1</div></div>
    <div class="col-xs-12 col-sm-6"><div class="well">Header 2<br>has two lines</div></div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6"><div class="well">Paragraph 1<br>has three lines<br>it's true</div></div>
    <div class="col-xs-12 col-sm-6"><div class="well">Paragraph 2</div></div>
  </div>
  <div id="line-3" class="row">
    <div class="col-xs-12 col-sm-6"><div class="well">Button 1</div></div>
    <div class="col-xs-12 col-sm-6"><div class="well">Button 2<br>has two lines</div></div>
  </div>
</div>

http://jsfiddle.net/glebkema/cjs1q42m/

3. 添加脚本并将数据从一种布局传输到另一种布局。

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

<div class="container">
  <h2>Columns</h2>
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div id="column-1" class="row">
        <div class="col-xs-12 column-1 line-1"><div class="well">Header 1</div></div>
        <div class="col-xs-12 column-1 line-2"><div class="well">Paragraph 1<br>has three lines<br>it's true</div></div>
        <div class="col-xs-12 column-1 line-3"><div class="well">Button 1</div></div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div id="column-2" class="row">
        <div class="col-xs-12 column-2 line-1"><div class="well">Header 2<br>has two lines</div></div>
        <div class="col-xs-12 column-2 line-2"><div class="well">Paragraph 2</div></div>
        <div class="col-xs-12 column-2 line-3"><div class="well">Button 2<br>has two lines</div></div>
      </div>
    </div>
  </div>
</div>

<div class="container"> 
  <h2>Lines</h2>
  <div id="line-1" class="row">
  </div>
  <div id="line-2" class="row">
  </div>
  <div id="line-3" class="row">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
$( document ).ready(function() {
  var idColumn1 = $('#column-1');
  var idColumn2 = $('#column-2');
  var idLine1 = $('#line-1');
  var idLine2 = $('#line-2');
  var idLine3 = $('#line-3');

  var classColumn1 = $('.column-1');
  var classColumn2 = $('.column-2');
  var classLine1 = $('.line-1');
  var classLine2 = $('.line-2');
  var classLine3 = $('.line-3');

  checkLayout();
  
  $( window ).resize(function() {
    checkLayout();
  });
  
  function checkLayout() {
    var classSm6 = 'col-sm-6';
    if (( window.innerWidth <= 768 ) && classColumn1.hasClass(classSm6)) {
      // console.info( "resize to xs" );
      classColumn1.appendTo(idColumn1).removeClass(classSm6);
      classColumn2.appendTo(idColumn2).removeClass(classSm6);
    } else if (( window.innerWidth > 768 ) && !classLine1.hasClass(classSm6)) {
      // console.info( "resize to sm" );
      classLine1.appendTo(idLine1).addClass(classSm6);
      classLine2.appendTo(idLine2).addClass(classSm6);
      classLine3.appendTo(idLine3).addClass(classSm6);
    }
  }
});
</script>

http://jsfiddle.net/glebkema/cjwc6uev/