css - 一行中的列表和图像似乎在变形 [bootstrap]

Question

我想在我的网页上将一个列表和一个图像并排排成一行。我觉得我在 bootstrap 上犯了一些错误，因为列表在图像下方结束(可能是因为它们占用了太多空间 - 我不认为我有太多列并且它正在换行)

如有任何建议，我们将不胜感激。

谢谢

HTML

<div class="row">
            <div class="col-xs-3">
              <img class="image-two image-border" src="https://scontent-sea1-1.cdninstagram.com/t51.2885-15/s480x480/e35/15253259_1789498794648779_1451041077317337088_n.jpg?ig_cache_key=MTM5ODUzMzg3MTkxNzgxNDg4Ng%3D%3D.2" alt="Me and Ami laughing together" /> 
            </div>
       </div>


            <!-- list of reasons I love Ami here -->
            <div class="row">
              <div class="col-xs-5 list-background">
              <p> Reasons I love her: </p>
                <ul> She is filled with love </ul>
                <ul> Her beautiful eyes </ul>
                <ul> Her lust for life </ul>
                <ul> The way she loves me </ul>


    </div>
</div>

CSS

.image-two 
{
max-width:40%;
max-height:40%;
}

.image-border {
padding:2px;
border:1px solid #021a40;
background-color: #0000ff;
}

.list-background{
display: inline-block;
background-color: yellow;
text-align: left;
border: solid;
border-radius: 25px;
max-width: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 20px;
padding-bottom: 0px;

Answer 1

试试这段代码。

我做了一些更正:

1. 你有两个 row div，但只想要一行。这就是为什么他们一个接一个地出现。

2. 你声明你的列表是错误的。您使用 <ul> 声明无序列表并使用 <li> 列出元素.

3. 您需要使用 Bootstrap 覆盖所有列。总共有 12 列，因此例如一个元素应占用 3 列，而其他元素应占用 9 列。不应该有任何剩余的列。

<div class="row">
  <div class="col-xs-3 col-sm-3 col-md-3">
    <img class="image-two image-border" src="https://scontent-sea1-1.cdninstagram.com/t51.2885-15/s480x480/e35/15253259_1789498794648779_1451041077317337088_n.jpg?ig_cache_key=MTM5ODUzMzg3MTkxNzgxNDg4Ng%3D%3D.2" alt="Me and Ami laughing together" />
  </div>
  <!-- list of reasons I love Ami here -->
  <div class="col-xs-9 col-sm-9 col-md-9 list-background">
    <p> Reasons I love her: </p>
    <ul>
      <li> She is filled with love </li>
      <li> Her beautiful eyes </li>
      <li> Her lust for life </li>
      <li> The way she loves me </li>
    </ul>
  </div>
</div>