Question

我有两列的行，左侧是文本，右侧是图像。问题在于，当我更改浏览器大小时，图像会下降，我想将它们保存在一行中。

此处HTML代码：

＆＃13;

#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;
    }

＆＃13;

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

＆＃13;

Answer 1

您需要为每个col-xs-6设置col-sm-6，因此它们将占用任何视口的窗口宽度的一半，包括额外的视口：

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

Answer 2

你将BS风格与你自己的风格混合得太多了。如果您正在使用BS，那么您不应该使用某些自己的风格，但如果您需要使用这些风格，那么请不要使用BS类。 IE浏览器。在这里你已经设置了col-sm-6类，但是你正在用你自己的样式重新定义宽度和边距，这使得不需要使用BS类。

如果您希望列的宽度始终为1/3和2/3，那么您的代码应为

<div id="features">
  <div class="row" id="row">
    <div class="col-xs-4" 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-8" id="features_image">
    </div>
  </div>
</div>

并删除宽度，左和右;右边距和#features_text和#features_image样式的浮动。同时删除左和右#row。

中的右边距和宽边样式

#row {
  margin-top: 27px;
  margin-bottom: 10px;
}

#features_text {
  /* Nothing here */
}

#features_image {
  background-image: url(../images/gif_image.jpg);
  height: 599px;
}

如果您没有其他任何内容，我不确定您将图像用作背景图像的原因。你也可以把它作为一个图像放在div中，并添加BS类，以便它缩小。

<img src="yourimage.jpg" class="img-responsive" />

这是一个带有干净代码的小提琴链接：https://jsfiddle.net/02gp4tL7/1/

你应该使用BS结构，即.container＆gt; .row＆gt; .col-sm-X使边距和填充正确。如果你想自定义视图，那么添加你自己的样式，但添加它，以便你也考虑到BS样式。

当我更改浏览器大小时，如何在一行中保留两列？

2 个答案: