Начальная панель навигации css

ProgramBox

Начальная панель навигации css

Post author:admin
Запись опубликована:29 января, 2023
Post category:Вопросы по программированию

#css #twitter-bootstrap

Вопрос:

У меня возникли проблемы с правильным выравниванием моей страницы. Кажется, что бы я ни делал, ни одна из строк не выравнивается так, как я бы хотел. либо изображения смещены относительно основного изображения, либо подписи под этими изображениями не выровнены должным образом.

Я бы хотел, чтобы стрелки располагались на том же уровне, что и службы / faq / contact, а абзацы под ними должны быть выровнены по левому краю. Но, похоже, я не могу добиться этого, не играя с полями в 10 разных местах.

http://www.bootply.com/bilUlNXdnE

http://i.imgur.com/vnE3N3U.jpg

1. Пожалуйста, разместите соответствующий jsFiddle или демонстрационный сайт, чтобы мы могли взглянуть.. Мы ничего не можем сделать, просто взглянув на изображение 🙁

2. Спасибо за ваш Bootply, но он полностью сломан (отсутствует много HTML)

3. @RahulPatil извините за то, что я отредактировал исходное сообщение bootply.com/bilUlNXdnE

4. @nevermind Я сказал другу, который является веб-разработчиком, что хочу научиться создавать веб-сайты. Он сказал, чтобы изучить bootstrap. Не для клиента или школьного задания. Просто пытаюсь разобраться во всем этом.

5. @Крис, я думаю, что сначала тебе следует начать с базового html / css / js, а затем с начальной загрузки. Говорят, что bootstrap (или любой css-фреймворк) сделает работу быстрее и проще, но иногда это создает больше проблем, чем решает (имхо).

Ответ №1:

Ну, это не просто ответ, я просто хочу направить вас в правильном направлении..

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

Ваш код :

 <div class="row " id="icons">
  <div class="col-md-4">
    <img src="img/bottle.gif" class="image-responsive " id="spray" width="300" alt="" height="240">      
  </div><!--/#Spray-->   

  <div class="col-md-4">
    <img src="img/vacuum.gif" class="image-responsive " id="vacuum" width="300" alt="" height="240">      
  </div><!--/#Vacuum--> 

  <div class="col-md-4">
    <img src="img/mop.gif" class="image-responsive " id="mop" alt="" width="300" height="240">      
  </div><!--/#Mop-->
</div>


<div class="row" id="captions">
  <div class="col-md-4">
    <h3>Services</h3>
  </div>
  <div class="col-md-4">
    <h3>FAQ</h3>
  </div>
  <div class="col-md-4">
    <h3>Contact</h3>
  </div>
</div>


<div class="row" id="arrows">
  <div class="col-md-4">
    <img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18">      
   </div>

  <div class="col-md-4">
    <img src="img/arrow8.gif" class="image-responsive" id="arrow2" alt="" width="18" height="18">
   </div>

  <div class="col-md-4">
    <img src="img/arrow8.gif" class="image-responsive" id="arrow3" alt="" width="18" height="18">
  </div>
</div>


<div class="row" id="blurbs">
  <div class="col-md-4" id="blurb1">      
    <div class="services"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
  </div><!--/#Spray-->   

  <div class="col-md-4" id="blurb2">      
    <div class="FAQ"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
  </div><!--/#Vacuum--> 

  <div class="col-md-4" id="blurb3">      
    <div class="contact"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
  </div><!--/#Mop--> 
</div>

Это слабая связь между элементами, которые находятся в одном контексте (например, заголовок, изображение, описание и т.д.).

Я бы порекомендовал вам написать что-то вроде этого —

 <div class="col-md-4">
   <img src="img/bottle.gif" class="image-responsive " id="spray" width="300" alt="" height="240"> 
   <div class="row">
      <div class="col-md-8">
         <h3>FAQ</h3>
      </div>
      <div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18">  </div>
   </div>
   <div class="services">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
   </div>
</div>
<!--/#Column1-->   


<div class="col-md-4">
   <img src="img/vacuum.gif" class="image-responsive " id="spray" width="300" alt="" height="240"> 
   <div class="row">
      <div class="col-md-8">
         <h3>FAQ</h3>
      </div>
      <div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18">  </div>
   </div>
   <div class="FAQ">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
   </div>
</div>
<!--/#Column2-->  


<div class="col-md-4">
   <img src="img/mop.gif" class="image-responsive " id="spray" width="300" alt="" height="240"> 
   <div class="row">
      <div class="col-md-8">
         <h3>FAQ</h3>
      </div>
      <div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18">  </div>
   </div>
   <div class="contact">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
   </div>
</div>
<!--/#Column3-->

Таким образом, вам не придется много играть с маржой и прочим..

Отредактированный пример: http://www.bootply.com/ZnylDYHd6x