Question

我们正在使用bootstrap，当我连续划分并将其划分为两列（col- -6和col - -6）时，则一列包含具有img-responsive类的响应式图像和其他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">
     	<div class="container">
    	<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>
    	
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 myfontpage">
          <h1>Welcome to Yoga fitness club</h1>
			<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>

bootstrap一行包含两个col。一个包含图像和其他背景图像

2 个答案: