html - 更改浏览器大小时如何将两列保持在一行中？

Question

我有两列的行，左边的列是文本，右边的是图像。 问题是当我改变浏览器大小然后图像下降，我想把它们排成一行。

这里是HTML代码:

#features {
      margin: 0px 0px 0px 0px;
      width: 100%;
    }
    
    #row {
      margin: 27px 15px 10px 0px;
      width: 100%;
    }
    
    #features_text {
      margin-left: 300px;
      margin-top: 43px;
      width: 27%;
    }
    
    
    .features_p {
      font-size: 24px;
      color: #0a3441;
      margin-bottom: 0px;
      margin-left: 72px;
    }
    
    #features_image {
      background-image: url(../images/gif_image.jpg);
      width: 992px;
      height: 599px;
      float: right;
      margin-left: 0;
      margin-right: -21px;
    }

 <div id="features">
      <div class="row" id="row">
        <div class="col-sm-6" id="features_text">
          <p class="features_p">Text Text Text Text Text Text Text Text</p>
          <p class="features_p">Text Text Text Text Text Text Text Text</p>
          <p class="features_p">Text Text Text Text Text Text Text Text</p>
          <p class="features_p">Text Text Text Text Text Text Text Text</p>
        </div>
        <div class="col-sm-6" id="features_image">
        </div>
      </div>
    </div>

Answer 1

您需要为它们中的每一个设置 col-xs-6 而不是 col-sm-6，因此它们将占据任何视口(viewport)窗口宽度的一半，包括超小的:

<div id="features">
  <div class="row" id="row">
    <div class="col-xs-6 text-center" id="features_text">
      <p class="features_p">Text Text Text Text Text Text Text Text</p>
      <p class="features_p">Text Text Text Text Text Text Text Text</p>
      <p class="features_p">Text Text Text Text Text Text Text Text</p>
      <p class="features_p">Text Text Text Text Text Text Text Text</p>
    </div>
    <div class="col-xs-6" id="features_image">
    </div>
  </div>
</div>