Сетка BootStrap не работает должным образом?

-1

enter image description here Я недавно работал над сайтом с бутстрапом, и по какой-то причине моя сетка, которую я установил, не полностью работает. В основном у меня есть веб-сайт с 2 столбцами, один столбец занимает 4 пространства сетки и остальные 8 пробелов. Как только размер страницы достигнет мобильного, ширина моего 8-сеткового снимка завинчивается. Вот кодСетка BootStrap не работает должным образом?

<!DOCTYPE HTML> 
<!-- Website Template by freewebsitetemplates.com --> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0"> 
    <title>Contact</title> 
    <link rel="stylesheet" href="css/contact.css" type="text/css"> 

      <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> 

      <style> 

      .header{ 
      padding:0;} 




      .leftcol{ 

       width:100%; 
       height:800px; 

        } 

      .rightcol{ 
       width:112.3%; 
       height:800px; 
       } 

      .text{ 
       color:black; 
       position:absolute; 
       top:10%; 
       left:35%; 
      } 

      .contact_image{ 
       width:50%; 
       position:absolute; 
       top:70%; 
       left:27%; 
      } 

      </style> 
</head> 


<body> 
<div class="container"> 


<header class="row"> 

<div class="header col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
<img id="papa" src="newImages/papaupdated.png"> 
</div> 


<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs"> 
<img src="newImages/remaxlogo.jpg"> 


</div> 

</header> 

<div class=" navigation navbar navbar-default row"> 
<ul class="nav navbar-nav"> 
       <li> 
        <a href="index.php">home</a> 
       </li> 
       <li> 
        <a href="opportunities.php">Opportunities</a> 
       </li> 
       <li> 
        <a href="propertymanagement.php">Property Management</a> 
       </li> 
       <li> 
        <a href="aboutjay.php">About Jay</a> 
       </li> 
       <li> 
        <a href="community.php">Community</a> 
       </li> 
       <li class="selected"> 
        <a href="contact.php">Contact</a> 
       </li> 

      </ul> 
</div> 

<div class=" row col-lg-4 col-md-4 col-sm-4 hidden-xs" > 
<img class="row leftcol" src="newImages/leftsidebackground.jpg"> 
</div> 



<div class=" row col-lg-8 col-md-8 col-sm-8 col-xs-12"> 
    <img class="rightcol row" src="images/greyimage.jpg"> 

     <div class="text col-lg-12"> 
      <p> Email me at <a href="mailto:[email protected]">[email protected]</a></p> 
        <p>(250) 751-1223 Office</p> 
        <p>(250) 751-1300 Fax</p> 
        <p><span style="color:red;">RE/MAX</span> Jay Cousins Realty</p> 
        <p>#1-5140 Metral Drive</p> 
        <p >Nanaimo B.C. Canada</p> 
        <p >(250) 751-1223 Bus.</p> 
        <p>(250) 751-1300 Fax.</p> 
        <p >"Each Office Independently Owned & Operated"</p></div> 

        <img class="contact_image" src="newImages/cityImage.jpg"> 
</div> 


<footer class=" row col-lg-12"> 

      <p> 
       &copy; Copyright 2012. All rights reserved 
      </p> 
</footer>

enter image description here

источник

2015-06-14 Kipperman

Почему вы установили «правокол» более 100%? – BSMP

Потому что по какой-то причине изображение не будет охватывать весь размер контейнера. Если я не установил его выше 100 – Kipperman

Снимите row в class=" row col-lg-8 col-md-8 col-sm-8 col-xs-12". Используйте обертку div с классом row.

Также используйте класс row только для нижнего колонтитула и добавьте внутренний div с классом col-lg-12.

В заголовке это правильно.

источник

2015-06-14 05:21:25

Спасибо, есть ли причина, почему, когда я вынимаю строку и добавляю отдельный div в качестве обертки, чтобы серо-серо-серые изображения были разделены? Затем я должен добавить 110% к ширине темного жрица, который не кажется правильным, но он работает? – Kipperman

Я не могу проверить это, поскольку вы не поделились всеми css. В любом случае добавление класса и класса col в один и тот же элемент неверно. Также неплохо дать ширину более 100%. Если необходимо, вы можете добавить дополнительные разделители для упаковки вне 'row' для выполнения ваших требований. –

@ Kipperman - Один из классов для этого div, вероятно, имеет отступы. Вы также не должны использовать класс «row» в тегах изображений. – BSMP

Kipperman, Надеюсь, это поможет вам на правильном пути здесь.
Я добавил вам способ получить ваши изображения в вашем divs, поэтому у вас нет проблемы, о которой вы упомянули. Я закодировал его, так что все говорит в пределах размера экрана.

Адрес Fiddle.

.image{ 
    background-image: url('http://placehold.it/900x500/e67e22/ffffff&amp;text=image'); 
    background-position: center center; 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

источник

2015-06-14 08:16:48 AngularJR

Спасибо, мужчина, я посмотрю. Я новичок в бутстрапе, поэтому я ценю это – Kipperman

Сетка BootStrap не работает должным образом?

ответ

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