Bootstrap эскиз - содержание Центр (IMG + титров) с надписью поплавка: левый

Привет,Bootstrap эскиз - содержание Центр (IMG + титров) с надписью поплавка: левый

Вот что я пытаюсь сделать:

Центрировать содержание: (IMG + подпись) каждого миниатюры. Моим img должно быть span3, а заголовок должен быть span4.

Вот моя проблема:

я могу получить содержимое центра, или заголовок поплавка рядом с IMG; Но я не могу получить оба одновременно.

Я начал использовать бутстрап сегодня утром, так что, я думаю, я использую какой-то класс неправильным способом.

Вот мой код:

<ul class="thumbnails"> 
    <li class="span12"> 
     <div class="thumbnail span12"> 
      <img class="span3" data-src="holder.js/300x200" alt="300x200"> 
      <div class="caption span4"> 
       <h3>My Title</h3> 
       <p>blabla</p> 
      </div> 
     </div> 
    </li> 
</ul>

enter image description here

источник

2013-03-25 Slake

Ускорение, из моего небольшого опыта работы с бутстрапом, вы должны создать содержащий div для настройки общей компоновки. Взгляните на блокнот - блок макета here. например,

<!-- wrap your twitter stuff in --> 
<div class="container"></div>

Кроме того, обратите внимание на этот очень полезный w3resource tutorial для создания эскизов с Twitter Bootstrap. После этого урока я быстро смог создать базовый пример сетки эскизов, которую вы пытаетесь настроить. Вы можете играть с кодом here.

Копирование части кода примера (далее в ссылке выше):

<div class="container"> 
    <ul class="thumbnails"> 
     <li class="span12"> 
      <div class="thumbnail"> 
       <div class="span3 offset2"><img src="http://lorempixel.com/300/200/sports/5" alt="300x200"></div> 
      <div class="span5"> 
       <h3>My Title</h3> 
       <p>blabla</p> 
      </div> 
      </div> 
     </li> 
    </ul> 
</div>

источник

2013-03-25 08:25:53 uchamp

Большое спасибо Actua lly, у меня есть контейнер (я просто копирую/вставляю часть кода, над которым я работаю) - теперь смотрят на w3ressources. – Slake

Вам нужно будет сделать пару изменений, чтобы сделать это отзывчивым. – uchamp

Кажется, отзывчивый, когда я изменяю размер моего окна до какого-либо размера; он все еще сохраняет пропорции - почему вы говорите, что это не так? – Slake

Дорогой друг:
Mey это может помочь u :)

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Bootstap</title> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"> 
<style> 
body {padding:20px;} 
img {margin:0 3px;} 
</style> 
</head> 

<body> 
<div class="container"> 
    <div class="row"> 
     <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div> 
     <div class="span8 pull-left"> 
      <h2>Heading</h2> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
    </div> 
    <br> 
    <div class="row"> 
     <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div> 
     <div class="span8 pull-left"> 
      <h2>Heading</h2> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
    </div> 
    <br> 
    <div class="row"> 
     <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div> 
     <div class="span8 pull-left"> 
      <h2>Heading</h2> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
    </div> 
</div> 

</body> 
</html>

источник

2013-03-25 07:55:57

Спасибо, но все-таки не то, что я ищу :( То же самое, но мой текст должен быть «span4 «И если вы измените его на« span4 », тогда он не будет центрирован. Любая идея, как я могу иметь: span4 span4 centered - Без использования смещений? – Slake

Что вы действительно ищете, я имею в виду схему ур ... ? –

Я пытаюсь получить мой (img + caption) сцентрированный и отзывчивый. – Slake

также вы можете использовать offset class иметь место для вашего контента, например, этот код:

<div class="container"> 
    <div class="row"> 
     <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div> 
     <div class="span7 pull-left"> 
      <h2>Heading</h2> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
     <div class="offset1"></div> 
    </div> 
    <br> 
    <div class="row"> 
     <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div> 
     <div class="span7 pull-left"> 
      <h2>Heading</h2> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
     <div class="offset1"></div> 
    </div> 
    <br> 
    <div class="row"> 
     <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div> 
     <div class="span7 pull-left"> 
      <h2>Heading</h2> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
     <div class="offset1"></div> 
    </div> 
</div>

источник

2013-03-25 08:02:15

Спасибо, но если я использую смещение, это убивает отзывчивый дизайн (если вы измените размер своего браузера, который будет выглядеть не по центру) – Slake

Bootstrap эскиз - содержание Центр (IMG + титров) с надписью поплавка: левый

ответ

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