1. дома
  2. Вопрос и ответ
  3. Ответственный нижний колонтитул падает слишком далеко ниже определенной высоты

Ответственный нижний колонтитул падает слишком далеко ниже определенной высоты

2016-06-24 3 views
0

Я хочу, чтобы мой нижний колонтитул был чувствительным на маленьком экране, но когда я уменьшаю ширину окна, мой второй уровень нижнего колонтитула (.pull-right) идет вниз по определенной высоте нижнего колонтитула. меня!Ответственный нижний колонтитул падает слишком далеко ниже определенной высоты

HTML:

<footer> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-6 col-md-4 pull-left"> 
        <h2>Stay in touch</h2> 
        <p>Got a website? you want me to work on<br>please, feel free to email me.</p> 
        <br> 
        <br> 
        <h4>Email</h4> 
        <p>[email protected]</p> 
       </div> 
       <div class="col-xs-6 col-md-4 pull-right"> 
        <h2>Follow me</h2> 
        <p>Follow me on social media...</p> 
        <br> 
        <br> 
        <a href=""><img width="36" height="36" src="img/twitter.png"></a> 
        <a href=""><img width="36" height="36" src="img/linkedIn.png"></a> 
        <a href=""><img width="36" height="36" src="img/insta.png"></a> 
        <a href=""><img width="36" height="36" src="img/fb.png"></a> 
       </div> 
      </div> 
      <div class="pull-bottom"> 
       <p>copyright &copy 2016 | Aisha Salman</p> 
      </div> 
     </div> 
    </footer>

CSS:

footer { 
    height: 400px; 
    width: 100%; 
    background-color: #181818; 
    color: white; 
} 

.pull-left { 
    float: left!important; 
    margin: 40px; 
} 

.pull-left h2 { 
    color: #8e8e8e; 
} 

.pull-left p { 
    font-size: 17px; 
    color: #6d6d6d; 
} 

.pull-left h4 { 
    color: #8e8e8e; 
} 

.pull-right { 
    float: right!important; 
    margin: 40px; 
} 

.pull-right h2 { 
    color: #8e8e8e; 
} 

.pull-right p { 
    font-size: 16px; 
    color: #6d6d6d; 
} 

.pull-bottom { 
    text-align: center; 
    color: #6d6d6d; 
    position: relative; 
    top: 50px; 
}

Скриншот: enter image description here

источник

2016-06-24 Aisha Salman

+1

Ваш '.Снять-right' элемент переполнен ваш' footer' элемент из-за 'float' правила объявлены. Установите 'overflow: auto' на' footer', чтобы решить эту проблему. Или, в идеале, в этих разрешениях отменять правила float и устанавливать элементы вложенного нижнего колонтитула для отображения в виде элементов «block». – UncaughtTypeError

+1

Изменение поля влево/вправо на маленьком экране –

+0

Я установил переполнение: автоматически до нижнего колонтитула, но все равно это вызывает ту же самую вещь @UncaughtTypeError –

ответ

1 
.pull-right { 
    float: right!important; 
    margin: 40px; // <== This margin causing your columns to drop in 2 lines. 
}

Вы margin: 40px; на .pull-left и .pull-right классов. Поэтому, применяя эти классы на .col-xs-6, они создают дополнительное пространство и ваши столбцы падают. Либо удалите их, либо переопределите их для правильной работы столбцов.

Примечание: вам не нужно применять pull-left к столбцам в бутстрапе. По умолчанию они оформлены в формате float: left.

footer { 
 
    height: 400px; 
 
    width: 100%; 
 
    background-color: #181818; 
 
    color: white; 
 
} 
 

 
.pull-left { 
 
    float: left !important; 
 
} 
 

 
.pull-left h2 { 
 
    color: #8e8e8e; 
 
} 
 

 
.pull-left p { 
 
    font-size: 17px; 
 
    color: #6d6d6d; 
 
} 
 

 
.pull-left h4 { 
 
    color: #8e8e8e; 
 
} 
 

 
.pull-right { 
 
    float: right !important; 
 
} 
 

 
.pull-right h2 { 
 
    color: #8e8e8e; 
 
} 
 

 
.pull-right p { 
 
    font-size: 16px; 
 
    color: #6d6d6d; 
 
} 
 

 
.pull-bottom { 
 
    text-align: center; 
 
    color: #6d6d6d; 
 
    position: relative; 
 
    top: 50px; 
 
} 
 

 
@media all and (min-width: 992px) { 
 
    .pull-left, 
 
    .pull-right { 
 
     margin: 40px; 
 
    } 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<footer> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-md-4"> 
 
     <h2>Stay in touch</h2> 
 
     <p>Got a website? you want me to work on<br>please, feel free to email me.</p> 
 
     <br> 
 
     <br> 
 
     <h4>Email</h4> 
 
     <p>[email protected]</p> 
 
     </div> 
 
     <div class="col-xs-6 col-md-4 pull-right"> 
 
     <h2>Follow me</h2> 
 
     <p>Follow me on social media...</p> 
 
     <br> 
 
     <br> 
 
     <a href=""><img width="36" height="36" src="img/twitter.png"></a> 
 
     <a href=""><img width="36" height="36" src="img/linkedIn.png"></a> 
 
     <a href=""><img width="36" height="36" src="img/insta.png"></a> 
 
     <a href=""><img width="36" height="36" src="img/fb.png"></a> 
 
     </div> 
 
    </div> 
 
    <div class="pull-bottom"> 
 
     <p>copyright &copy 2016 | Aisha Salman</p> 
 
    </div> 
 
    </div> 
 
</footer>

источник

2016-06-24 12:21:06

+0

Спасибо! получил это :) @Muhammad Usman –

+1

@AishaSalman, что вы радушны) –

+0

Но тогда свойство margin не работает на полную ширину окна. Должен ли я использовать другое свойство для этого? @Muhammad Usman –

1
класс

Не используйте втягивания право самозагрузки компенсировали для этой цели http://getbootstrap.com/css/#grid-offsetting

Попробуйте это:

<div class="col-xs-6 col-md-4"></div> 
<div class="col-xs-offset-0 col-xs-6 col-md-offset-2 col-md-4"></div>

источник

2016-06-24 12:29:36

+0

ok получил это @Germano Plebani –

1

я есть добавить медиа-запрос

footer { 
 
    height: 400px; 
 
    width: 100%; 
 
    background-color: #181818; 
 
    color: white; 
 
} 
 

 
.pull-left { 
 
    float: left!important; 
 
    margin: 40px; 
 
} 
 

 
.pull-left h2 { 
 
    color: #8e8e8e; 
 
} 
 

 
.pull-left p { 
 
    font-size: 17px; 
 
    color: #6d6d6d; 
 
} 
 

 
.pull-left h4 { 
 
    color: #8e8e8e; 
 
} 
 

 
.pull-right { 
 
    float: right!important; 
 
    margin: 40px; 
 
} 
 

 
.pull-right h2 { 
 
    color: #8e8e8e; 
 
} 
 

 
.pull-right p { 
 
    font-size: 16px; 
 
    color: #6d6d6d; 
 
} 
 

 
.pull-bottom { 
 
    text-align: center; 
 
    color: #6d6d6d; 
 
    position: relative; 
 
    top: 50px; 
 
} 
 
@media(max-width:1020px){ 
 
.pull-left, .pull-right{ 
 
    margin: 0px; 
 
} 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<footer> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-md-4 pull-left"> 
 
     <h2>Stay in touch</h2> 
 
     <p>Got a website? you want me to work on<br>please, feel free to email me.</p> 
 
     <br> 
 
     <br> 
 
     <h4>Email</h4> 
 
     <p>[email protected]</p> 
 
     </div> 
 
     <div class="col-xs-6 col-md-4 pull-right"> 
 
     <h2>Follow me</h2> 
 
     <p>Follow me on social media...</p> 
 
     <br> 
 
     <br> 
 
     <a href=""><img width="36" height="36" src="img/twitter.png"></a> 
 
     <a href=""><img width="36" height="36" src="img/linkedIn.png"></a> 
 
     <a href=""><img width="36" height="36" src="img/insta.png"></a> 
 
     <a href=""><img width="36" height="36" src="img/fb.png"></a> 
 
     </div> 
 
    </div> 
 
    <div class="pull-bottom"> 
 
     <p>copyright &copy 2016 | Aisha Salman</p> 
 
    </div> 
 
    </div> 
 
</footer>

источник

2016-06-24 12:32:46

+0

Спасибо! :) @Lalji Tadhani –

+1

@AishaSalman приветствуется –

+0

Не могли бы вы объяснить этот медиа-запрос, пожалуйста? @Lalji Tadhani –

 Смежные вопросы

  • Нет связанных вопросов^_^