Bootstrap 4 Отзывчивость не работает должным образом - PullRequest
Новая
       3

Bootstrap 4 Отзывчивость не работает должным образом

0 голосов
/ 25 июня 2019

CSS Framework: Bootstrap 4

JQUERY, JS MASK для проверки и маскирования ввода

Пользовательский CSS для окраски и полей / отступов / определения размера шрифта

Хорошо работает на:Экран рабочего стола / ноутбука \

Работает плохо на: Мобильный / Планшетный / Очень большой экран

Я разрабатываю экран добавления продукта для моего инвентаря, fireworkstech.com, проблема в том, что яя не могу сделать его отзывчивым для маленьких и очень больших экранов.Элементы искажены, и похоже, что ничего не работает вообще.

Пожалуйста, помогите в этом или определите мою ошибку, которая вызывает проблему.HTML / CSS встроен в вопрос.

Заранее спасибо 

.top_navigation {
  background-color: #875a7b;
  height: 41px;
}

.button_color {
  background-color: #00a09d
}

.container {
  color: #9f7b95
}

.product_detail_nav nav li {
  color: #9f7b95
}

.product_new {
  margin-left: 115px;
}

.container_product_name {
  border-top: 1px #ddd;
  border-right: 1px #ddd;
  border-left: 1px #ddd;
  width: 800px;
  margin-left: 115px;
  height: 99px;
}

.li_data_new_pages li {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 10px
}

.general_info {
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

.info_general {
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  margin-right: 8px;
}

.info {
  margin-left: 40px;
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

.weight_inventory {
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  margin-left: 4px;
}

.discription_inventory {
  border-top: 1px slategrey;
  border-left: 1px slategrey;
  border-right: 1px slategrey;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="file.css">
  <title>Assignment</title>

</head>

<body>
  <div>
    <nav class="top_navigation">
      <li class="nav-item d-inline-flex">
        <a class="nav-link  h4 text-light" href="#">Inventery</a>.
      </li>
      <li class="nav-item d-inline-flex">
        <a class="nav-link dropdown-item  text-light" href="#">Overview</a>
        <a class="nav-link text-light" href="#">Operation</a>
        <a class="nav-link text-light" href="#">Data</a>
        <a class="nav-link text-light" href="#">Reporting</a>
        <a class="nav-link text-light" href="#">Configration</a>
      </li>
    </nav>
  </div>
  <div class="container p-2">
    <a class="h6 mt-3 ">Product/New</a>
    <div class="button">
      <button type="button" class="btn btn-primary button_color">Save</button>
      <button type="button" class="btn btn-light">Discard</button>
    </div>
  </div>

  <div class="ml-3 mt-1 ">
    <button type="button" class="btn btn-light bg-light"><strong>Update Qty On Hand</strong></button>
    <button type="button" class="btn btn-light bg-light"><strong>Replinish</strong></button>
  </div>
  <div class="container mt-2 text-right">
    <a class="ml-3 fas fa-link h6 text-secondary" href="#">Archive</a>
  </div>
  <div>

    <a class="text-left font-weight-bold product_new">Product-Name</a>
    <div class="container_product_name">
      <div class="form-group">
        <input type="Product-Name" class="form-control" type="text" placeholder="Product Name">

      </div>
    </div>
  </div>
  <div class="container">
    <div class="form-check">
      <label class="form-check-label" for="Can be Sold">
                          <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Sold" value="something">Can be Sold
                        </label>
    </div>
    <div class="form-check">
      <label class="form-check-label" for="Can be Sold">
                              <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Purchased" value="something">Can be Purchased
                            </label>
    </div>
  </div>
  <div class="container mt-4 p-2">
    <ul class="nav nav-tabs li_data_new_pages">
      <li><a data-toggle="tab" href="#information">General Information</a></li>
      <li><a data-toggle="tab" href="#sales">Sales</a></li>
      <li><a data-toggle="tab" href="#inventory">Inventory</a></li>
    </ul>

    <div class="tab-content">
      <div id="information" class="container tab-pane active">
        <h3>General Information</h3>
        <a>
          <div>
            <div>
              <form class="form-inline general ">
                <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                  <label for="sell">Product<br>Type</label>
                  <select class="form-control general_info" id="sell">
                    <option>consumable</option>
                    <option>service</option>
                    <option>storeable</option>
                  </select>
                </div>
                <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                  <label for="information">Sale Prices</label>
                  <input class="form-control decimal general_info" id="information" type="text" placeholder="1.00">
                  </input>
                </div>

              </form>
            </div>
            <div class="align-left">
              <form class="form-inline">
                <div class="input-group mt-1 w-50 font-weight-bold">
                  <label for="sell">Product<br>Category</label>
                  <select class="form-control info_general" id="sell">
                    <option>All</option>
                    <option>Expenses</option>
                    <option>Saleable</option>
                  </select>
                </div>
                <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                  <label for="information">Cost</label>
                  <input class="form-control decimal info" id="information" placeholder="0.00" data-inputmask="'mask':'9999999'">
                  </input>
                </div>
              </form>
            </div>
            <div class="input-group mt-2 w-50 p-2 font-weight-bold">
              <label for="information">Internal<br>refrence</label>
              <input class="form-control general_info" id="information" data-inputmask="'mask':'*AAAAAAAAAAAAAAAAAAAAAAAAAA*'">
              </input>
            </div>
            <div class="input-group mt-2 w-50 p-2 font-weight-bold">
              <label for="information">Barcode</label>
              <input class="form-control general_info" id="information">
              </input>
            </div>
            <div class="container">
              <form action="/action_page.php">
                <div class="form-group font-weight-bold">
                  <label for="comment">For Internal Notes</label>
                  <textarea class="form-control general_info" rows="5" id="comment" name="text" placeholder="This note is only for internal purpose"></textarea>
                </div>
              </form>
            </div>
          </div>
        </a>
      </div>
      <div id="sales" class="tab-pane fade">
        <h3>Sales</h3>
        <p>.......</p>
      </div>

      <div id="inventory" class="tab-pane fade">
        <form class="form-inline">
          <p class="h2 col-9">Operation</p>
          <div>
            <p class="h2 col-3">Logistics</p>
          </div>
          <div class="form-inline col-6">
            <strong>Route</strong>
            <div class="form-check">
              <label class="form-check-label" for="route">
                              <input type="checkbox" class="form-check-input" id="route" name="route" value="something" style="width:75px">Make to order
                            </label>
            </div>
          </div>
          <div class="input-group mt-2 w-50 p-2 font-weight-bold">
            <label for="inventory">Weight</label>
            <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0">
            </input>

            <label for="inventory" style="margin-left:6px">Volume</label>
            <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0"><i>m³</i></input>
          </div>
        </form>
        <div>
          <div class="input-group w-25">
            <label for="inventory"><strong>Custom Lead Time</strong></label>
            <input class=" form-control text-dark decimal weight_inventory" id="inventory" placeholder="Type here">days</input>
          </div>

        </div>
        <div class="container">
          <form action="/action_page.php">
            <div class="form-group font-weight-bold">
              <label for="comment">Discription for Delivery Orders</label>
              <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on delivery orders."></textarea>
            </div>
          </form>
        </div>
        <div class="container">
          <form action="/action_page.php">
            <div class="form-group font-weight-bold">
              <label for="comment">Discription for Delivery Receipts</label>
              <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on receipt orders (e.g. where to store the product in the warehouse)."></textarea>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/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>
    <script src="https://kit.fontawesome.com/01a5396e7a.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
    <script>
      $(document).ready(function decimal() {
        $(".decimal").inputmask('decimal', {
          rightAlign: true
        });
      });
    </script>
    <script>
      $(":input").inputmask();
    </script>

</body>

</html>

1 Ответ

1 голос
/ 25 июня 2019

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

Я пытался их исправить и сделать так, чтобы они выглядели разумно с минимальными изменениями.

Пожалуйста, сравните мою версиючтобы узнать изменения.

Самое важное, что мы пытаемся сохранить только одну container на HTML-странице и сохранить все данные на ней.

Также ваша навигационная панель не работаетдолжным образом.Я не исправил это.Я рекомендую вам использовать стандартный загрузчик navbar из его раздела примеров. Примеры Navbar 

.top_navigation {
  background-color: #875a7b;
  height: 41px;
}

.button_color {
  background-color: #00a09d
}

.container {
  color: #9f7b95
}

.product_detail_nav nav li {
  color: #9f7b95
}


/* 
.product_new {
  margin-left: 115px;
}
 */

.container_product_name {
  border-top: 1px #ddd;
  border-right: 1px #ddd;
  border-left: 1px #ddd;
  /* width: 800px;
  margin-left: 115px; */
  height: 99px;
}

.li_data_new_pages li {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 10px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div>
  <nav class="top_navigation">
    <li class="nav-item d-inline-flex">
      <a class="nav-link  h4 text-light" href="#">Inventery</a>.
    </li>
    <li class="nav-item d-inline-flex">
      <a class="nav-link dropdown-item  text-light" href="#">Overview</a>
      <a class="nav-link text-light" href="#">Operation</a>
      <a class="nav-link text-light" href="#">Data</a>
      <a class="nav-link text-light" href="#">Reporting</a>
      <a class="nav-link text-light" href="#">Configration</a>
    </li>
  </nav>
</div>
<div class="container p-2">
  <a class="h6 mt-3 ">Product/New</a>
  <div class="button">
    <button type="button" class="btn btn-primary button_color">Save</button>
    <button type="button" class="btn btn-light">Discard</button>
  </div>
  <div class="mt-1 ">
    <button type="button" class="btn btn-light bg-light"><strong>Update Qty On Hand</strong></button>
    <button type="button" class="btn btn-light bg-light"><strong>Replinish</strong></button>
  </div>
  <div class="mt-2 text-right">
    <a class="ml-3 fas fa-link h6 text-secondary" href="#">Archive</a>
  </div>
  <div>
    <a class="text-left font-weight-bold product_new">Product-Name</a>
    <div class="container_product_name">
      <div class="form-group">
        <input id="Product-Name" class="form-control" type="text" placeholder="Product Name">
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="form-check">
    <label class="form-check-label" for="Can be Sold">
                          <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Sold" value="something">Can be Sold
                        </label>
  </div>
  <div class="form-check">
    <label class="form-check-label" for="Can be Sold">
                              <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Purchased" value="something">Can be Purchased
                            </label>
  </div>
</div>
<div class="container mt-4 p-2">
  <ul class="nav nav-tabs li_data_new_pages">
    <li><a data-toggle="tab" href="#information">General Information</a></li>
    <li><a data-toggle="tab" href="#sales">Sales</a></li>
    <li><a data-toggle="tab" href="#inventory">Inventory</a></li>
  </ul>

  <div class="tab-content">
    <div id="information" class="container tab-pane active">
      <h3>General Information</h3>
      <a>
        <div>
          <div>
            <form class="form-inline general ">
              <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                <label for="sell">Product<br>Type</label>
                <select class="form-control general_info" id="sell">
                  <option>consumable</option>
                  <option>service</option>
                  <option>storeable</option>
                </select>
              </div>
              <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                <label for="information">Sale Prices</label>
                <input class="form-control decimal general_info" id="information1" type="text" placeholder="1.00">
              </div>
            </form>
          </div>
          <div class="align-left">
            <form class="form-inline">
              <div class="input-group mt-1 w-50 font-weight-bold">
                <label for="sell">Product<br>Category</label>
                <select class="form-control info_general" id="sell1">
                  <option>All</option>
                  <option>Expenses</option>
                  <option>Saleable</option>
                </select>
              </div>
              <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                <label for="information">Cost</label>
                <input class="form-control decimal info" id="information2" placeholder="0.00" data-inputmask="'mask':'9999999'">

              </div>
            </form>
          </div>
          <div class="input-group mt-2 w-50 p-2 font-weight-bold">
            <label for="information">Internal<br>refrence</label>
            <input class="form-control general_info" id="information" data-inputmask="'mask':'*AAAAAAAAAAAAAAAAAAAAAAAAAA*'">

          </div>
          <div class="input-group mt-2 w-50 p-2 font-weight-bold">
            <label for="information">Barcode</label>
            <input class="form-control general_info" id="information">
          </div>
          <div class="container">
            <form action="/action_page.php">
              <div class="form-group font-weight-bold">
                <label for="comment">For Internal Notes</label>
                <textarea class="form-control general_info" rows="5" id="comment" name="text" placeholder="This note is only for internal purpose"></textarea>
              </div>
            </form>
          </div>
        </div>
      </a>
    </div>
    <div id="sales" class="tab-pane fade">
      <h3>Sales</h3>
      <p>.......</p>
    </div>

    <div id="inventory" class="tab-pane fade">
      <form class="form-inline">
        <p class="h2 col-9">Operation</p>
        <div>
          <p class="h2 col-3">Logistics</p>
        </div>
        <div class="form-inline col-6">
          <strong>Route</strong>
          <div class="form-check">
            <label class="form-check-label" for="route">
                              <input type="checkbox" class="form-check-input" id="route" name="route" value="something" style="width:75px">Make to order
                            </label>
          </div>
        </div>
        <div class="input-group mt-2 w-50 p-2 font-weight-bold">
          <label for="inventory">Weight</label>
          <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0">


          <label for="inventory" style="margin-left:6px">Volume</label>
          <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0"><i>m³</i>
        </div>
      </form>
      <div>
        <div class="input-group w-25">
          <label for="inventory"><strong>Custom Lead Time</strong></label>
          <input class=" form-control text-dark decimal weight_inventory" id="inventory" placeholder="Type here">days
        </div>

      </div>
      <div class="container">
        <form action="/action_page.php">
          <div class="form-group font-weight-bold">
            <label for="comment">Discription for Delivery Orders</label>
            <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on delivery orders."></textarea>
          </div>
        </form>
      </div>
      <div class="container">
        <form action="/action_page.php">
          <div class="form-group font-weight-bold">
            <label for="comment">Discription for Delivery Receipts</label>
            <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on receipt orders (e.g. where to store the product in the warehouse)."></textarea>
          </div>
        </form>
      </div>
    </div>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/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>
  <script src="https://kit.fontawesome.com/01a5396e7a.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
  <script>
    $(document).ready(function decimal() {
      $(".decimal").inputmask('decimal', {
        rightAlign: true
      });
    });
  </script>
  <script>
    $(":input").inputmask();
  </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...