Не удается удалить поля в веб-приложении реагирования - PullRequest
Новая
       3

Не удается удалить поля в веб-приложении реагирования

0 голосов
/ 24 июня 2018

У меня проблемы с удалением этих огромных белых полей в моем реактивном проекте. Ниже приведены некоторые решения, которые я попробовал. 

* { margin: 0; padding: 0; }

/ - / - / - / 

body {
  max-width: 2040px;
  margin: 0 auto;
  padding: 0 5%;
  clear: both;
}

Я перепробовал все варианты. Мои единственные установленные зависимости, которые должны влиять на все, что касается CSS, - это начальная загрузка, и я не думаю, что это так. Я попытался настроить max-width на значение 2040px, просто чтобы проверить, будет ли оно работать, и, кажется, существует предел, на который я могу установить ширину. Помощь будет оценена.

Я должен также упомянуть, что это постоянно на протяжении всей страницы. Эта проблема не ограничивается фоновым изображением, на которое я ссылаюсь в файле css Белые поля

Ответы [ 4 ]

0 голосов
/ 14 июля 2019

Все браузеры используют разные поля по умолчанию, из-за чего сайты выглядят по-разному в другом браузере.

* - это wildcard, что означает all elements, присутствующих на нашем сайте (рассмотрим как универсальный селектор ), поэтому мы устанавливаем для каждого элемента на нашем сайте значение ноль поле и нулевое заполнение , чтобы сайт выглядел одинаково во всех браузерах.

Если ваш стиль не применяется, вы можете использовать !important для переопределения стиля, 

* {    
    margin: 0 !important;
    padding: 0 !important;
}
0 голосов
/ 24 июня 2018

* { margin: 0; padding: 0; } переопределить браузером.

попробуй 

html,body{
   margin:0;
   padding:0;
}
0 голосов
/ 14 июля 2019

Таблица стилей агента пользователя переопределяет пользовательский стиль.Вы можете переопределить это, используя! Important в обычных html и css

. Лучше использовать пользовательскую библиотеку интервалов, чем переопределять пользовательскую таблицу стилей по умолчанию https://material -ui.com / system / spacing /

или вы можете использовать следующую 

<body id="body">
<div id="appRoot"></div>
</body>

таблицу стилей 

body
  margin: 0
  padding: 0
button
  padding: 10px 20px 
  border-radius: 5px
  outline: none

Реагировать на блоки кода JS 

class A extends React.Component{  
  componentWillMount(){
    document.getElementById('body').className='darktheme'
  }
    componentWillUnmount(){
    document.getElementById('body').className=''
  }
  render(){
    return (
      <div> Component A </div>
    )
  }
}
class App extends React.Component{  
  constructor(){
    super()
    this.state = {
      isAMount: false
    }
  }

  handleClick(){
    this.setState({
      isAMount: !this.state.isAMount
    })
  }

  render(){
    return (
    <div> 
        <button onClick={this.handleClick.bind(this)}> Click Me</button> 
        <div> App </div>
        <hr />
        <div> {this.state.isAMount && <A /> } </div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('appRoot'))
0 голосов
/ 24 июня 2018

Как вы используете фоновое изображение.Его проблема из-за соотношения размеров изображения.

Вы должны использовать свойство background-size: cover в css.

Также используйте соответствующее background-position, чтобы убедиться, что молоток находится в центре нижней части страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...