Question

嘿伙计们我试图在我的分屏布局上创建一个50:50的比例。一边是文字而另一边的图片我能够得到这么远。

<br/>

CSS

<div class="content-section-a">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-sm-6">
                <div class="clearfix"></div>
                <h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
                <p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
            </div>
            <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                <img class="img" src="assets/img/prg.jpg">
            </div>
        </div>
    </div>

Answer 1

尝试使用Bootstrap的网格系统。以下是您可以使用的一些示例HTML：

<div class="row">
  <div class="col-md-6">
    <h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
    <p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
  </div>
  <div class="col-md-6">put your images in this section<img class="img" src="assets/img/prg.jpg"></div>
</div>

这会将文本部分放在页面左侧，将响应图像放在右侧。如果页面折叠使其无法横向放置，则会堆叠。如果您愿意，可以更改此项。有关更多信息，请参阅网格系统上的Bootstrap指南。 http://getbootstrap.com/css/#grid

Answer 2

您应该使用col-xs-6代替col-sm-6，因为col-sm-x用于最小宽度：768px或更高的屏幕。

您可能会看到它显示在底部，因为您使用sm代替xs而屏幕分辨率低于768px。

如何使用boostrap创建分屏并添加响应式图像

2 个答案: