Не удалось «выровнять» строки начальной загрузки

Question

В настоящее время я создаю отзывчивый веб-сайт с бутстрапом, но я столкнулся с проблемой, ссылаясь на приведенный ниже код, я не могу их «выровнять» друг с другом.

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, в дивы, class="col-sm-6 col-md-4 my-div" вы можете получить желаемый результат, если высота элементов меньше 400px ...

Вы можете установить высоты всех дивы, используя следующий код 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» событие, или в

Answer 2

Вейпин Привет.
Возможно, вам будет проще просто добавить 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

Я хотел страницу, чтобы быть как реагировать, как возможно, например 3 cols для col-md, 2 для col-sm и 1 для col-xs.

Я использовал сценарий от 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/