Question

我目前正在尝试使用Bootstrap来获得两列：一个宽度为1/3，一个为2/3大小。

我所拥有的是一个容器，并且在其中一行：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4">
      asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
    </div>
    <div class="col-md-8">
      <img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="image.png" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" />
      <map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
    </div>
  </div>
</div>

＆＃13;

所以我的预期结果（在我的理解中）将是文本和换行符的页面的1/3，而2/3（在右侧）将是带有图像映射的图像。< / p>

但是：结果都在下面，所以在一行中有这个thex文本（在col-md-4内），在下一行有图像（在col-md-8)内。问题在哪里？

信息：我的视口足够大，甚至更改为xs都不会改变结果。

Answer 1

正如你的评论所写，这可以工作：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4">
      asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
    </div>
    <div class="col-md-8">
      <img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="https://upload.wikimedia.org/wikipedia/commons/3/33/Su%C3%ADno_alta.jpg" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" style="max-width: 100%; height: auto !important" />
      <map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
    </div>
  </div>
</div>

＆＃13;

Answer 2

对于小屏幕使用col-sm-4和col-xs-4，因为col-md-4占用了992像素及以上的屏幕。对于图像来说，重要的是给img-reponsive类。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-4 col-xs-4">
      asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
    </div>
    <div class="col-md-8 col-sm-8 col-xs-8">
      <img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="https://dummyimage.com/600x200/000/fff&text=sample+image" alt="" usemap="#image-maps-2017-08-25-161100" border="0" class="map img-responsive" />
      <map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
    </div>
  </div>
</div>

＆＃13;

Bootstrap柱系统，使用col-md-4进行换行

2 个答案: