Проблемы с компоновкой бутстрапа

Работа с шаблоном Bootstrap (бесплатная реакция-шаблон-фотография). Изменены фотографии, цвета к чему-то, что у меня есть и как. Начиналось добавлять popovers к фотографиям для описания, но теперь макет ушел с 3-4 эскизов в ширину (span3 или span4), чтобы все фотографии были уложены вертикально. 1 вместо 3 или 4. Не изменили ни один из CSS, кроме цветов. Где я пошла наперекосяк? Любые идеи, где можно скорректировать этот макет?Проблемы с компоновкой бутстрапа

<body> 
<div class="container"> 
<div class="row"> 
     <article class="span4"> 
<h2>Popover with Twitter Bootstrap</h2> 
<div class="clear"></div> 
<ul><img src="img/bar/tBDR-BM4.png" id="BDR-BM4" class="btn btn-success" rel="popover" data-original-title="">BDR-BM4</a> 
</ul> 

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap-tooltip.js"></script> 
<script src="js/pbootstrap-popover.js"></script> 
<script> 
$(function() 
{ $("#BDR-BM4").popover({title: 'BDR-BM4', content: "Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"}); 
}); 
</script> 
<ul><img src="img/bar/tBDR-B12.png" id="BDR-B12" class="btn btn-success" rel="popover" data-original-title="">BDR-B12</a> 
</ul> 

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap-tooltip.js"></script> 
<script src="js/pbootstrap-popover.js"></script> 
<script> 
$(function() 
{ $("#BDR-B12").popover({title: 'BDR-15A', content: "Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"}); 
}); 
</script> 
<ul><img src="img/bar/tBDR-B20H.png" id="BDR-B20H" class="btn btn-success" rel="popover" data-original-title="">BDR-B20H</a> 
</ul> 

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap-tooltip.js"></script> 
<script src="js/pbootstrap-popover.js"></script> 

<script> 
$(function() 
{ $("#BDR-B20H").popover({title: 'BDR-B20H', content: "Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"}); 
}); 
</script> 
<ul><img src="img/bar/tBDR-B16F.png" id="BDR-B16F" class="btn btn-success" rel="popover" data-original-title="">BDR-B16F</a> 
</ul> 

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap-tooltip.js"></script> 
<script src="js/pbootstrap-popover.js"></script> 
<script> 
$(function() 
{ $("#BDR-B16F").popover({title: 'BDR-B16F', content: "Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"}); 
}); 
</script> 

</body></html>

источник

2013-02-20 TFBone

Можете ли вы опубликовать тестовую страницу или показать нам, что именно происходит? – Shail

http://webpages.charter.net/tfbone/Popover.htm – TFBone

Вы используете следующий код несколько раз на странице, размещайте его в нижнем колонтитуле только один раз.

<script src="js/jquery.min.js"> 
<script src="js/bootstrap-tooltip.js"> 
<script src="js/pbootstrap-popover.js">

удалить Также clear div после article tag т.е.

<div class="clear"></div>/*remove*/

Я очистил ваш код немного и переставить несколько вещей, используйте следующее в вашем теле и посмотреть, если ее желаемый результат вы хотите достичь:
Jsfiddle with the result Please check

screenshot of result in browser

<div class="container"> 
<div class="row"> 
    <article class="span12"> 
     <h2>Popover with Twitter Bootstrap</h2> 

     <div class="row-fluid"> 
     <div class="span3"> 
      <ul> 
       <img src="http://webpages.charter.net/tfbone/img/bar/tBDR-BM4.png" id="BDR-BM4" 
       class="btn btn-success" rel="popover" data-original-title="">BDR-BM4</a> 
      </ul> 
     </div> 
     <div class="span3"> 
      <ul> 
       <img src="http://webpages.charter.net/tfbone/img/bar/tBDR-B12.png" id="BDR-B12" 
       class="btn btn-success" rel="popover" data-original-title="">BDR-B12</a> 
      </ul> 
     </div> 
     <div class="span3"> 
      <ul> 
       <img src="http://webpages.charter.net/tfbone/img/bar/tBDR-B20H.png" id="BDR-B20H" 
       class="btn btn-success" rel="popover" data-original-title="">BDR-B20H</a> 
      </ul> 
</div> 
<div class="span3"> 
    <ul> 
     <img src="http://webpages.charter.net/tfbone/img/bar/tBDR-B16F.png" id="BDR-B16F" 
     class="btn btn-success" rel="popover" data-original-title="">BDR-B16F</a> 
    </ul> 
</div> 
<script> 

</script> 
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap-tooltip.js"></script> 
<script src="js/pbootstrap-popover.js"></script> 
<script> 
    $(function() { 
     $("#BDR-BM4").popover({ 
      title: 'BDR-BM4', 
      content: "Black Dawn Lower Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder" 
     }); 
    }); 
    $(function() { 
     $("#BDR-B12").popover({ 
      title: 'BDR-15A', 
      content: "Black Dawn Lower Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder" 
     }); 
    }); 
    $(function() { 
     $("#BDR-B20H").popover({ 
      title: 'BDR-B20H', 
      content: "Black Dawn Lower Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder" 
     }); 
    }); 
    $(function() { 
     $("#BDR-B16F").popover({ 
      title: 'BDR-B16F', 
      content: "Black Dawn Lower Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder" 
     }); 
    }); 
</script> 
     </div> 
    </article> 
    </div> 
    </div>

источник

2013-02-21 11:56:58 Shail

Да, это так. Благодаря! Смотрел слишком долго, без изменений. Знал, что кто-то это увидит. Еще раз спасибо!! – TFBone

Проблемы с компоновкой бутстрапа

ответ

Смежные вопросы