Вопрос:

Переместить текст на той же строке в CSS

html css css3 styles html-lists

513 просмотра

3 ответа

465 Репутация автора

Моя проблема заключается в том, что в нижнем колонтитуле, если второй div имеет меньше текста .. 3-й div намного выше, чем 4-й div, когда экран меньше. Я хочу поставить фиксированную высоту на первый 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>

демонстрация

Автор: user4756836 Источник Размещён: 10.04.2017 04:02

Ответы (3)


1 плюс

261 Репутация автора

Решение

Не совсем уверен, что это то, что вы ищете, но попробуйте добавить это в свой код. 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;
  }
}
Автор: scarsam Размещён: 10.04.2017 04:24

0 плюса

358 Репутация автора

Попробуйте использовать класс .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>

Надеюсь, что это поможет.

Автор: M. K Hossain Размещён: 10.04.2017 06:13

0 плюса

12309 Репутация автора

Вы можете использовать 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>

Автор: Mihai T Размещён: 10.04.2017 08:32
Вопросы из категории :
32x32