Бутстреп один ряд содержит два столбца. один содержит изображение и другое фоновое изображение.

Question

Мы используем бутстрап, когда я беру строку и деля ее на два столбца (col--6 и col- -6), тогда один столбец содержит отзывчивое изображение с img-отзывчивым класс и другое col содержит описание изображения, имеющего цвет фона/изображение. но этот размер цвета/изображения не равен первому столбцу, имеющему изображение, когда я просматривал его на экране мобильного телефона. Вот мой код:

.myfontpage{ background:URL(Image/main.jpg) center no-repeat; width:100%; height:100%; } 
 

 
.myfontpage h1,p{padding:15px 30px; text-align:center; font-size:4vw;}

<div class="row"> 
 
     \t <div class="container"> 
 
    \t <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
     <img src="Image/main.jpg" alt="Can not Display" class="imp-responsive"/> 
 
     </div> 
 
    \t 
 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 myfontpage"> 
 
      <h1>Welcome to Yoga fitness club</h1> 
 
\t \t \t <p>This is free template. only for the practices </a></p> 
 
     </div> 
 
     </div> 
 
</div>

Answer 1

Насколько я понял ваш вопрос, я думаю, вам нужно как столбцы одинакового размера. попробуйте удалить ширину: 100%; высота: 100%; из класса myfontpage.

Answer 2

Я думаю, вы не включили js и css-файлы для бутстрапа. Вы можете включить его в свой проект, загрузив его или используя следующую CDN:

Для CSS:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

Для JS:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>