Question

我试图并排放两张照片。我以为我可以通过使用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

Answer 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>

Answer 2

首先，在使用诸如“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>

如何并排设置2张图片？

2 个答案: