Question

我有一个4行的容器，每行有4列8比例的两列。对于每列，它适用于宽度超过1080px的屏幕，少于此内容重叠。

我想要做的是让所有列变成具有整个屏幕宽度的行。

如果有人有任何建议可以获得更好的结果，请帮助我。我找到了许多有同样问题的人的问题，并尝试了他们的解决方案，但没有任何对我有用。

＆＃13;

.proctitleleft {
  font-size: 20px;
  position: absolute;
  left: 90px;
  top: 20px;
  bottom: 20px;
}

.procimageleft {
  position: relative;
  margin-bottom: 40px;
  margin-right: 90px;
  margin-top: 20px;
}

.procimageright {
  position: relative;
  margin-bottom: 40px;
  margin-left: 90px;
}

.procparagleft1 {
  position: absolute;
  left: 100px;
  top: 138px;
  font-size: 14px;
}

.procparagleft2 {
  position: absolute;
  left: 100px;
  top: 138px;
  font-size: 14px;
}

.procparagleft3 {
  position: absolute;
  left: 100px;
  top: 138px;
  font-size: 14px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="processcontainer">
  <div class="arw_tab_title">
    <div class="tab_title">
      <h2 class="title">The Process</h2>
      <p class=""></p>
    </div>
    <div class="tab_sub_title">
      <h2 class="title">our perfect process</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-8">
      <div class="proctitleleft">
        <h3>1-Far far away</h3>
      </div>
      <div class="procparagleft1">
        <p>It all started with a farmer and his extraordinary efforts to grow what people later called the best cotton in town
          <br>To Bangladesh we went to see if that was true.And it was!<br>
        </p>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="procimageleft">
        <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process1.png">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <div class="procimageright">
          <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process2.png">
        </div>
      </div>
      <div class="col-xs-8">
        <div class="proctitleleft">
          <h3>2-Lavish Studio left their mark </h3>
        </div>
        <div class="procparagleft2">
          <p>Oh buddy! What can I say?
            <br>Working around the clock to deliver powerful yet very elegant designs that was approved by an internal community before seeing the light of day<br>
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-8">
        <div class="proctitleleft">
          <h3>3-Complete the artwork</h3>
        </div>
        <div class="procparagleft3">
          <p>Partnering up with the same factory that deal with Adidas, Reebok and Name, we were able to transform an idea into a very big powerful reality
          </p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="procimageleft">
          <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process3.png">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <div class="procimageright">
          <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process4.png">
        </div>
      </div>
      <div class="col-xs-8">
        <div class="proctitleleft">
          <h3>4- Quality meets perfection
          </h3>
        </div>
        <div class="procparagleft2">
          <p>We stand by our products because we’re confident in what we deliver.
            <br> That’s why we designed an unsurpassed shopping and unboxing experience to befit such creations
            <br>
          </p>
        </div>
      </div>
    </div>
  </div>

＆＃13;

Answer 1

使用col-md-4和col-md-8代替col-xs-*，因此您在992px宽度和492px以下的完整col宽度上的比率为4：8。你不必自己做。这是bootstrap的标准行为。

有关详细信息，请参阅https://getbootstrap.com/css/#grid-media-queries

Answer 2

使用三个类col-md-4，col-sm-4和col-xs-12，最后一个用于最小设备全宽div标签。

将Bootstrap列隐藏到小型设备的行中

2 个答案: