如何并排设置2张图片?

时间:2017-12-06 11:56:44

标签: html css twitter-bootstrap-3

我试图并排放两张照片。我以为我可以通过使用bootstrap网格来做到这一点,但它对我不起作用。 my code

<div class="row">
  <div class="col-xs-6">
    <img src="https://lh3.googleusercontent.com/aHxLM6563JbtHMwdbWTAEzIbILKwxsuM-s6SIGR2zki8h5wmSf-Semz8xhNIbwbHGwAW3CE3j-g=w640-h400-e365" alt="google">
 <div class="col-xs-6">
    <img src="http://www.hisocial.com/eng/wp-content/uploads/2013/08/fb_login_1.png" alt="facebook">

我希望投资组合图片如下:

his code

2 个答案:

答案 0 :(得分:1)

更新:添加了“文字右侧”,以便左侧图像正确定位

<div class="row">
    <div class="col-xs-6 text-right">
        <img src="https://lh3.googleusercontent.com/aHxLM6563JbtHMwdbWTAEzIbILKwxsuM-s6SIGR2zki8h5wmSf-Semz8xhNIbwbHGwAW3CE3j-g=w640-h400-e365" alt="google">
    </div>
    <div class="col-xs-6">
        <img src="http://www.hisocial.com/eng/wp-content/uploads/2013/08/fb_login_1.png" alt="facebook">
    </div>
</div>

答案 1 :(得分:0)

首先,在使用诸如“row”和“col-xs-6”之类的类之前,您需要将自己包含在引导程序框架中。如果你还没有 -

,请包含这行代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

对桌面使用col-md- *&amp;笔记本电脑而不是xs。 XS适用于小型设备。试试这段代码:

<div class="row">
<div class="col-md-6">
    <img src="https://lh3.googleusercontent.com/aHxLM6563JbtHMwdbWTAEzIbILKwxsuM-s6SIGR2zki8h5wmSf-Semz8xhNIbwbHGwAW3CE3j-g=w640-h400-e365" alt="google">
</div>
<div class="col-md-6">
    <img src="http://www.hisocial.com/eng/wp-content/uploads/2013/08/fb_login_1.png" alt="facebook">
</div>