Используя CSS или HTML, как я могу устранить поля веб-сайта? - PullRequest
Новая
       6

Используя CSS или HTML, как я могу устранить поля веб-сайта?

0 голосов
/ 05 сентября 2018

Я создаю раздел проекта моего личного сайта.

Это выглядит следующим образом:

Сайт

Я пытаюсь избавиться от левого поля, чтобы мое изображение могло начинаться с левого поля.

Это мой текущий код: 

    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
  <div class="row-lg-4">
    <div class="hovereffect">
        <img class="img-responsive" src="../Projects/img/cyberSecurity.jpg" height = "600vh" width = "100vw" alt="">
            <div class="overlay">
                <h2>Effect 12</h2>
        <p>
          <a href="#">LINK HERE</a>
        </p>
            </div>
    </div>
</div>
</div>

Я пытался сделать встроенный CSS 

<body style="margin:0; padding:0;">

Не работает.

Я также пытался сделать: 

* {
margin: 0;
padding: 0;
* *} Тысяча двадцать-один

в моем файле CSS. Однако это тоже не сработало.

Любая помощь будет очень признательна: D

Хорошего дня.

Ответы [ 3 ]

0 голосов
/ 05 сентября 2018

Если вы хотите, чтобы несколько столбцов шли от края к краю, вы можете просто использовать .no-gutters на .row и убедиться, что он не вложен в .container. 

<div class="row no-gutters">
    <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
0 голосов
/ 06 сентября 2018

Есть некоторые вещи, которые вы должны исправить, чтобы сделать это без какой-либо «силы».

Вам нужно обернуть все это в одну строку div (div class = "row"), так как столбец должен находиться внутри строки следующим образом: 

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
         <div class="row-lg-4>
            <div class="hovereffect">
                 <img class="img-responsive" src="../Projects/img/cyberSecurity.jpg" height = "600vh" width = "100vw" alt="">
                 <div class="overlay">
                    <h2>Effect 12</h2>
                    <p>
                     <a href="#">LINK HERE</a>
                    </p>
                 </div>
            </div>
        </div>
    </div>  
</div>

Убедитесь, что " <div class="hovereffect">" не имеет какого-либо свойства пробела, добавленного в файл CSS.

Эта строка по умолчанию будет иметь отступ 15 пикселей, поэтому вы можете избавиться от этого заполнения, добавив класс «px-0». (если он находится внутри строки, вам не нужно это делать). 

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">

В качестве конечного ресурса, если какой-либо из них сработал для вас (они должны работать, поскольку именно так работает система сетки), вы можете создать свой собственный класс без заполнения, который будет выглядеть следующим образом: 

.nospacing {
   padding: 0 !important;
   margin: 0 !important;
}

Затем вы можете добавить его в любой из ваших HTML-тегов.

0 голосов
/ 05 сентября 2018

Чтобы удалить отступы / поля в начальной загрузке, сделайте что-то вроде этого.

Добавьте no-padding класс к padding: 0px; для столбцов начальной загрузки и no-marginLR класс к margin-left:0; и margin-right:0; для строк начальной загрузки.

здесь no-padding и no-marginLR используются в качестве примера. 

<div class="container">
<div class="row no-marginLR">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 no-padding">
      ...your code
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...