Bootstrap заголовок оберточной выпуск

] 2 Bootstrap заголовок оберточной выпуск

В начальной загрузки в большой сетке, когда «социальная Recr ..» заголовок потребности обернуть на другой линии, это создает проблему выравнивания для столбца идентификации бренда, как его заголовок ISNT для правильного выравнивания. как я решить бутстрапом Issue

код:

<br/> 
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
        <h3>Social Recruitment Campaigns</h3> 
        <img src="whatweCreate-SocialCampaign.png" class="img-responsive"> 
       </div> 
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
        <h3>Brand Identity</h3> 
        <img src="whatweCreate-BrandID.png" class="img-responsive"> 
       </div> 
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
        <h3>Responsive Career Websites</h3> 
        <img src="whatweCreate-responsive.png" class="img-responsive"> 
       </div> 
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
        <h3>Career Videos</h3> 
        <img src="whatweCreate-CareerVideo.png" class="img-responsive"> 
       </div> 
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
        <h3>Digital Marketing</h3> 
        <img src="whatweCreate-digitalMarketing.png" class="img-responsive"> 
       </div> 
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
        <h3>Games</h3> 
        <img src="whatweCreat-gamese.png" class="img-responsive"> 
       </div>

источник

2016-02-04 sharin gan

Вставить все заголовки в Col-мкр-4 дел.
заверните их в col-md-12 div
Сделайте то же самое с изображениями.

Все изображения находятся в одной и той же вертикальной выравнивания Теперь

<div class="col-md-12"> 
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <h3>Social Recruitment Campaigns</h3> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <h3>Brand Identity</h3> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <h3>Responsive Career Websites</h3> </div></div> 

<div class="col-md-12"> 
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img src="whatweCreate-SocialCampaign.png" class="img-responsive"> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img src="whatweCreate-BrandID.png" class="img-responsive"> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img src="whatweCreate-responsive.png" class="img-responsive"> </div></div>

источник

2016-02-04 07:50:48 osanger

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

Я добавил его к своему ответу. Надеюсь, вы поняли мою идею. Не могу, скрипта, я не на ПК – osanger

Спасибо, что решает эту проблему, но теперь на маленьком экране все заголовки находятся один под другим, а изображения один ниже друг друга не чередуются. –

Вы можете попробовать это:

<h3><br>Brand Identity</h3>

Не самое лучшее решение, но это легко и должно работать.

источник

2016-02-04 07:53:02 Vetm

Легко, но не работает со всей шириной экрана. – osanger

, если я это сделаю, тогда только изображение идентичности бренда будет сдвинуто вниз, когда все, подходящее правильно на большом экране –

Ну, вы могли бы просто скрыть
на размерах экрана, где это вызывает это. – Vetm

Правильный и наиболее целесообразный способ сделать это с помощью BootStrap - создавать строки для заголовков и соответствующих изображений.

Поддержание отдельной первой строки, содержащей заголовки, за которой следует строка, содержащая такое же количество изображений.

Преимущество:
Таким образом, вы будете также уменьшить вероятность создания неправильной структуры сетки для вашего приложения. Другим преимуществом является то, что, поскольку заголовки и изображения очерчены, усилия, предпринятые для любых изменений для любого отдельного элемента, минимальны, поскольку его очень модулярно.

<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Social Recruitment Campaigns</h3></div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Brand Identity</h3></div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Responsive Career Websites</h3></div> 
</div> 
<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
    <img src="whatweCreate-responsive.png" class="img-responsive"> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
    <img src="whatweCreate-responsive.png" class="img-responsive"> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
    <img src="whatweCreate-responsive.png" class="img-responsive"> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Career Videos</h3></div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Digital Marketing</h3></div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Games</h3></div> 
</div> 
<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
    <img src="whatweCreate-responsive.png" class="img-responsive"> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
    <img src="whatweCreate-responsive.png" class="img-responsive"> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
    <img src="whatweCreate-responsive.png" class="img-responsive"> 
    </div> 
</div>

Вот Fiddle

источник

2016-02-04 08:48:48

Bootstrap заголовок оберточной выпуск

ответ

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