Колонка Bootstrap обрезает левый край моих строк - PullRequest
Новая
       3

Колонка Bootstrap обрезает левый край моих строк

3 голосов
/ 06 ноября 2019

У меня есть проект python / flask / html, над которым я сейчас работаю. Я использую загрузчик 4 для системы сетки с несколькими строками и столбцами. Когда я пытаюсь запустить свой проект, он обрезает несколько пикселей в левой части экрана. Я просмотрел весь код и до сих пор не уверен, почему это так. Здесь - это jsfiddle с моим кодом, а также его печатная копия. Спасибо за любую помощь! 

<!DOCTYPE html>


<!-- Link to css file -->
<link rel="stylesheet" type="text/css" href="/static/main.css" mesdia="screen"/>

<!-- Bootstrap CDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<meta charset="UTF-8">
<title>Layout</title>
<!--<h1>Welcome to the layout</h1>
<p>Where would you like to navigate to?</p>-->


<div class="row" id="navcols">

    <div class="col">
        <div class="row h-50">Row</div>
        <div class="row h-50">Row</div>
    </div>


    <div class="col-sm-6">
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
    </div>

    <div class="col">
        <div class="row">Row</div>
    </div>

</div>

<!--
<div class="container-fluid">
    <h1 id="test">Welcome to my page! Where do you want to navigate to?</h1>
</div>-->


    html,body {
  height: 100%;
  width: 100%;
}

.col {
    background-color:red;
}

Ответы [ 4 ]

2 голосов
/ 06 ноября 2019

Что касается макета Bootstrap, вам всегда нужно помещать элементы row и col в div с классом container или container-liquid . Если вам нужен столбец полной ширины, используйте container-liquid . контейнер имеет значение максимальной ширины пикселя, тогда как. container-liquid - максимальная ширина 100%. . Container-Fluid постоянно изменяет размеры, когда вы меняете ширину окна / браузера на любую величину. : 

html,
body {
  height: 100%;
  width: 100%;
}

.col {
  background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container-fluid">

  <div class="row" id="navcols">

    <div class="col">
      <div class="row h-50">Row</div>
      <div class="row h-50">Row</div>
    </div>


    <div class="col-sm-6">
      <div class="row h-100">Row</div>
      <div class="row h-100">Row</div>
      <div class="row h-100">Row</div>
      <div class="row h-100">Row</div>
      <div class="row h-100">Row</div>
    </div>

    <div class="col">
      <div class="row">Row</div>
    </div>
  </div>

</div>
0 голосов
/ 06 ноября 2019

Ваш класс Bootstrap содержит -15px поля слева и справа;вот почему он разрезает ваш экран. Таким образом, вы можете исправить это, сделав его 0. 

<div class="row" id="navcols" style="margin-left:0; margin-right:0;">

    <div class="col">
        <div class="row h-50">Row</div>
        <div class="row h-50">Row</div>
    </div>


    <div class="col-sm-6">
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
    </div>

    <div class="col">
        <div class="row">Row</div>
    </div>

</div>

Screen shot

0 голосов
/ 06 ноября 2019

Попробуйте добавить класс .container ИЛИ .container-Fluid в родительский div в своем HTML. 

<div class="container">

<div class="row" id="navcols">

    <div class="col">
        <div class="row h-50">Row</div>
        <div class="row h-50">Row</div>
    </div>


    <div class="col-sm-6">
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
        <div class="row h-100">Row</div>
    </div>

    <div class="col">
        <div class="row">Row</div>
    </div>

</div>

</div>
0 голосов
/ 06 ноября 2019

Оберните ваш div класса строки внутри контейнера или div класса контейнера-жидкости 

<div class='container'>
  <div class='row'>
    <!--your grid-->
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...