无法“对齐”引导行答案

【问题标题】：Unable to "align" bootstrap rows无法“对齐”引导行
【发布时间】：2016-03-22 23:42:08
【问题描述】：

我目前正在使用引导程序构建一个响应式网站，但我遇到了一个问题，参考下面的代码，我无法让它们彼此“对齐”。

This rough sketch would be what I want my end result to turn out

<div class="container">
<div class="row-fluid">


<div class="col-sm-6 col-md-4">
<h3><a href="#" onclick="hide;" >1Cross-country cycling</a></h3>
<p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
</div>

<div class="col-sm-6 col-md-4">
<h3><a href="#">2Mountain bike trials</a></h3>
<p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars, lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
</div>

<div class="col-sm-6 col-md-4">
<h3><a href="#">3Enduro</a></h3>
<p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
</div>

<div class="col-sm-6 col-md-4">
<h3><a href="#">4Freeride </a></h3>
<p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control, and speed.</p>
</div>

<div class="col-sm-6 col-md-4">
<h3><a href="#">5Dirt jumping</a></h3>
<p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land on the 'landing'.</p>
</div>

<div class="col-sm-6 col-md-4">
<h3><a href="#">6Downhill mountain biking (DH)</a></h3>
<p>Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots. 
</p>
</div>


</div>
</div>

在这里查看我的 JSFiddle：https://jsfiddle.net/he4rtbr0ken/gcc3oxoj/1/

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

卫平你好。
您可能会发现每行添加 2 个项目会更好。
当 div 被压缩时，你会遇到在文本中使用固定高度的问题。

看看这个FIDDLE HERE。

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">  
<body>
 <!--column examples-->
  <div class="container">
    <div class="row">


      <div class="col-md-4 col-sm-6">
        <h3><a href="#" onclick="hide;" >1Cross-country cycling</a></h3>
        <p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths
          connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
      </div>

      <div class="col-md-4 col-sm-6">
        <h3><a href="#">2Mountain bike trials</a></h3>
        <p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials
          riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars,
          lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
      </div>
</div><!-- end row -->
<div class="row">

      <div class="col-md-4 col-sm-6">
        <h3><a href="#">3Enduro</a></h3>
        <p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner
          is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
      </div>

      <div class="col-md-4 col-sm-6">
        <h3><a href="#">4Freeride </a></h3>
        <p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control,
          and speed.</p>
      </div>
</div><!-- end row -->
<div class="row">

      <div class="col-md-4 col-sm-6">
        <h3><a href="#">5Dirt jumping</a></h3>
        <p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land
          on the 'landing'.</p>
      </div>

      <div class="col-md-4 col-sm-6">
        <h3><a href="#">6Downhill mountain biking (DH)</a></h3>
        <p>Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front
          and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots.
        </p>
      </div>
</div><!-- end row -->

 </div>

</body>  
</body>
</html>

【讨论】：

【解决方案2】：

如果你想要水平对齐，你需要相同的高度，id est，你需要强制相同的高度。

例如

.my-div{
   height: 400px;
 }

如果你在div中添加my-div类，class="col-sm-6 col-md-4 my-div"你可以得到想要的结果，如果元素的高度小于400px...

您可以设置所有div的高度，使用下面的javascript + dom代码（例如）：

function set_max_height (){
 var div = document.getElementById("main-row"); // main-row is the parent div of the list...
  if(!div) return ; 
  var divs= div.getElementsByTagName("div");
  if(!divs) return; 
  var L = divs.length;
  var maxHeight = 0;
  for(var i=0; i<L; i++){
   var mh = divs[i].offsetHeight;
   if(mh > maxHeight) maxHeight = mh;
  }
  for(var i=0; i<L; i++){
    divs[i].style.height = maxHeight.toString() + "px"; 
  }
}

你可以在“onload”事件中使用这个函数，或者在

【讨论】：

如果有这种情况，有没有办法检查行内div的最大高度是多少？
卫平你好。我使用下一个解决方案：计算所有项目的高度

【解决方案3】：

根据您为所需草图提供的图像，我认为这就是您要寻找的：

<div class="container">
        <div class="row">
            <div class="col-sm-2">
                <h3><a href="#" onclick="hide;">1Cross-country cycling</a></h3>
                <p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
            </div>

            <div class="col-sm-2">
                <h3><a href="#">2Mountain bike trials</a></h3>
                <p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars, lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <h3><a href="#">3Enduro</a></h3>
                <p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
            </div>

            <div class="col-sm-2">
                <h3><a href="#">4Freeride </a></h3>
                <p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control, and speed.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <h3><a href="#">5Dirt jumping</a></h3>
                <p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land on the 'landing'.</p>
            </div>

            <div class="col-sm-2">
                <h3><a href="#">6Downhill mountain biking (DH)</a></h3>
                <p>
                    Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots.
                </p>
            </div>
        </div>
    </div>

【讨论】：

【解决方案4】：

我希望页面尽可能响应迅速，例如col-md 3 列，col-sm 2 列，col-xs 1 列。

我使用来自Use jQuery/CSS to find the tallest of all elements 的脚本来获取最高高度，然后将班级的高度设置为最高高度。

$().ready(function() {

  var maxHeight = 0;

  $('.col-sm-6').each(function() {
    maxHeight = maxHeight > $('.col-sm-6').height() ? maxHeight : $('.col-sm-6').height();
  });

  $('.col-sm-6').each(function() {
    $('.col-sm-6').height(maxHeight);
  });


  console.log(maxHeight)
  console.log("loaded")
})

这是我在 JSFiddle 中的解决方案：https://jsfiddle.net/he4rtbr0ken/gcc3oxoj/9/

【讨论】：