Bootstrap — мой контент имеет большое пустое пространство

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Как вы можете видеть здесь: введите описание изображения здесьв моем контенте много пробелов. Мой HTML-код содержимого приведен ниже. Не уверен, почему он не выравнивается должным образом и имеет большие пробелы. Не имеет смысла. Я использую col-lg-6 и col-md-6, поэтому он должен все время работать наполовину и наполовину.

Есть идеи?

 <div class="tab-pane active" id="specification">
<ul class="productinfo">

<div class="col-lg-6 col-md-6">
<h3>Specs</h3>
<ul class="unstyled listoption5"><li>Single bag holds approx. 20 gallons of water. </li><li>Fits mininum 1 inch tree trunk up to a maximum 4 inch tree trunk (Zip 2 bags together to water 5 to 8 inch trees/2 bags=about 40 gallon setup) </li><li>Made of green polyethylene with nylon webbing, black polypro straps and green nylon zippers. </li><li>UV treated to withstand exposure to sunlight. </li><li>2 drip hole locations per bag-Standard drip time of 5 to 9 hours. </li><li>Fill opening fits up to 3" diameter hose.</li><li>Filled with water: 30" Tall x 18" Wide (at base)</li></ul>
</div>

<div class="col-lg-6 col-md-6">
<h3>Product Features</h3>
<ul class="unstyled listoption5">DIRECTIONS FOR USE: <li>Place on tree trunk, with the zippers on the uphill side of the tree. </li><li>Wrap both sides around trunk (1" to 4" dia. trunk*) until zippers meet. </li><li>Two 20 gal. bags zipped together back-to-back - Fits 5 to 8" dia. trunk </li><li>Zip sides of bag together from bottom to top. </li><li>Lift tag to expose fill opening at top of bag. </li><li>Insert hose into fill opening and begin filling with water. </li><li>Fill bag to 1/4 capacity, then gently lift up on straps at top of bag to
</li></ul></div>

<div class="col-lg-6 col-md-6">
<h3>Product Benefits</h3>
<ul class="unstyled listoption5"><li>No more guess work- Provides a professional watering every time. </li><li>Reduces watering frequency-Fill just once a week for most new tree plantings. </li><li>Reduces the amount of time spent at tree- Setup and fill in less than 5 minutes. </li><li>Saves water resources- 100% water absorption with little or no run-off. </li><li>Deep water penetration with each application- Promotes deep root growth and reduces transplant shock.</li></ul>
</div>

<div class="col-lg-6 col-md-6">
<h3>Warranty</h3>
5 Year limited manufacturer warranty from the date of purchase against defects in materials and workmanship.
</div>

<div class="col-lg-6 col-md-6">
<h3>Links</h3>
<a target="_blank" href="http://www.treegator.com/products/specs/TreegatorOrig_SpecSheet.pdf">Spec Sheet</a><br><a href="http://iteminfo.amleo.com/help-desk/items/t/tg20/tg20.pdf">Additional Product Specifications amp;amp; Handling Precautions</a><br><a target="_blank" href="http://www.treegator.com/products/original/index.html">Double Bag Set Up</a>
</div>

<div class="col-lg-6 col-md-6">
<h3>Application Rates</h3>
Failure to Follow Handling Procedures May Void Manufacturer's Warranty - Do not hang and/or suspend bag from straps. - Before use, remove all sharp objects from area to be irrigated. - Use clean water only. If necessary, filter water through cotton cloth on hose end. - Do not unzip bag when full. - Do not tear or rip fill opening. - Treegator® is not a toy - Keep away from children. - If using water soluble fertilizers, be sure to pre-mix in a separate container before adding mixture to bag. - Treegator® is designed for use on mulch. Failure to do so can result in clogging of drip holes.
</div>

</ul>
</div>
 

Комментарии:

1. Ваш HTML неверен. Вы не можете иметь div в качестве дочернего элемента ul.

2. Где находится <div class=»row»></div> в вашей разметке?

3. @j08691 О, хорошо, я могу это исправить достаточно легко. Но решит ли это проблему, с которой я сталкиваюсь?

Ответ №1:

Используйте следующий код вокруг каждых 2 столбцов:

 <div class="row">...</div>
 

Это исправит макет, например: http://www.bootply.com/t8m0BopAkO

Комментарии:

1. Единственная проблема, с которой я сталкиваюсь, заключается в том, что контент является динамическим. На некоторые продукты будет распространяться гарантия или преимущества продукта, а на другие — нет. Я не уверен, как я могу определить «Эй, там было 2, закончите строку здесь».