Question

我想在bootstrap的同一行中的两列之间水平对齐多个项目。下面是一个示例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/

在示例中，我希望有两个条件

标题，p和按钮元素应位于相同的水平高度。在我的示例中，右侧标题是两行，因此右侧p元素比左侧p
如果屏幕尺寸缩小，则第1列的所有元素应该在彼此正下方，然后是第2列的所有元素 - ＆gt;我尝试通过多行来解决它，但是你有标题1，标题2，p 1，p 2，...而是我想要标题1，p 1，按钮1，然后是标题2，第2页，按钮2

如何用CSS解决它？

Answer 1

我有三种解决方案。

在media >= 768px使用flexbox 。

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

针对不同的屏幕尺寸重复数据和制作两种布局。

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

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

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

Answer 2

你想让它们在列中居中吗？您可以在每列上使用文本中心类。

<div class="col-sm-6 text-center">

如果您希望它们垂直居中，有几种方法可以做到。我最近有这个问题，我们将显示更改为table-cell并使用了vertical-align：middle;在CSS（Launching the Google Drive sharing dialog in your app）中。或者您可以使用example here，但它并不适用于所有浏览器。

Answer 3

这是你在尝试什么？如果您在jsfiddle中测试结果，请将预览屏幕放大以查看结果：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="row">
        <h1 class="col-md-3">Short Heading</h1>
        <p class="col-md-7">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  class="col-md-2"">Button</button>
      </div>

    </div>
    <div class="col-sm-6">
        <div class="row">
          <h1 class="col-md-3">Super long Heading that requires 2 rows</h1>
          <p class="col-md-7">Some short content</p>
          <button class="btn btn-primary col-md-2">Button</button>
        </div>
    </div>
  </div>
</div>

另外，您可以使用内部列来使它们适合您的需要，但这可以根据您的需要放在同一行上。我为中等或更宽的屏幕制作了这个，在小屏幕上，它将默认为将它们置于另一个之下的正常行为，但同样，您可以通过更改md部分或添加更多类{{}来玩它{1}}

这是看起来如何：

如果你想让你的内容水平对齐，你也可以试试这个，这有点棘手但是有效：

https://plnkr.co/edit/s01bZi2OJc8xm2QlKuII?p=preview

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

3 个答案: