在CSS的同一行上移动文本

Question

我的问题是，如果第二个div的文本较少，则在页脚中..当屏幕较小时，第3个div高于第4个div。 我想在第一格上设置一个固定的高度。

我努力了：

.footer ul {
  height: 100px;
}

但它与文字重叠

<div class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul>
          <li class="Heading">TEST</li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul>
          <li class="Heading">TEST</li>
          <li><a href="#">Test Account</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul class="padding-none">
          <li class="Heading">SUBSCRIBE TO NEWSLETTER</li>
          <input type="text" id="sub-input" name="subscribe" placeholder="Enter your email address" />
        </ul>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul>
          <li class="Heading">Test</li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

演示版

Answer 1

不完全确定这是否是您要查找的内容，请尝试将其添加到代码中。 clear我在下面发布的HTML和CSS。 这是更新的小提琴 。

HTML（将其添加到页脚的第三个div中）

<div class="col-md-3 col-sm-4 col-xs-6 clear">
  <ul class="padding-none">
    <li class="Heading">SUBSCRIBE TO NEWSLETTER</li>
    <input type="text" id="sub-input" name="subscribe" placeholder="Enter your email address" />
  </ul>
</div>

的CSS

.clear {
  clear: both;
}
@media only screen and (min-width : 768px)  {
  .clear {
    clear: none;
  }
}

Answer 2

尝试在行和列中使用.row-eq-height类以了解更多信息，请访问

Bootstrap等高列

这是一个例子：

<div class="row row-eq-height">
    <div class="col-xs-3"><ul>
      <li class="Heading">Test</li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul></div>
    <div class="col-xs-3"><ul>
      <li class="Heading">TEST</li>
      <li><a href="#">Test Account</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul></div>
    <div class="col-xs-4"><ul class="padding-none">
      <li class="Heading">SUBSCRIBE TO NEWSLETTER</li>
      <input type="text" id="sub-input" name="subscribe" placeholder="Enter your email address" />
    </ul></div>
  <div class="col-xs-4"><ul>
      <li class="Heading">Test</li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul></div>
  </div>

希望对您有所帮助。

Answer 3

您可以使用row-eq-height （如之前的回答中所述），但是如果仅通过放置该类仍无法正常工作，则可以将此CSS代码用于行

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

参见下面的片段或jsfiddle

 footer{ background-color: #333742; color: #8b94a4; padding-top: 50px; float: bottom; } .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } #sub-input{ background-color: #393e4a; color : #7e8796; border: 0; border-radius: 20px; width: 250px; height: 40px; padding : 14px; padding-left: 30px; } .footer ul{ list-style: none; } .footer ul a{ text-decoration: none; color: #8b94a4; } .footer ul li{ padding: 7px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="footer"> <div class="container-fluid"> <div class="row row-eq-height"> <div class="col-md-3 col-sm-4 col-xs-6"> <ul> <li class="Heading">TEST</li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <ul> <li class="Heading">TEST</li> <li><a href="#">Test Account</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <ul class="padding-none"> <li class="Heading">SUBSCRIBE TO NEWSLETTER</li> <input type="text" id="sub-input" name="subscribe" placeholder="Enter your email address" /> </ul> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <ul> <li class="Heading">Test</li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </div> </div> </div> </div>