Question

我目前正在建立一个带有bootstrap的响应式网站，但我遇到了一个问题，参考下面的代码，我无法拥有它们＆＃34;对齐＆＃34;彼此。

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/

Answer 1

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

例如

.my-div{
   height: 400px;
 }

如果您添加班级my-div，则在div class="col-sm-6 col-md-4 my-div"中，如果元素的高度小于400px，则可以获得所需的结果...

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

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”事件或

中使用此功能

Answer 2

Weiping 你好您可能会发现每行最多添加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>

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

Answer 4

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

我使用Use jQuery/CSS to find the tallest of all elements中的脚本获得最高的高度，然后将类的高度设置为最高的高度。

int[]

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

无法＆＃34;对齐＆＃34;引导行

4 个答案: