Выравнивание bootstrap пролетов с помощью CSS - PullRequest
Новая
       2

Выравнивание bootstrap пролетов с помощью CSS

0 голосов
/ 17 июня 2020

Я пытаюсь создать базовый c bootstrap макет для приложения-планировщика рабочего дня, но когда ширина текстового содержимого увеличивается, это влияет на вертикальное выравнивание промежутков, в которые я помещаю часы дня, когда вы можно увидеть на картинке:

enter image description here

Есть ли способ заставить эти пролеты слева выровняться по вертикали, используя CSS или, может быть, даже а bootstrap класс? Вот мой HTML: 

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
      <link rel="stylesheet" href="style.css" />
      <title>Work Day Scheduler</title>
    </head>
    
    <body>
      <header class="jumbotron">
        <h1 class="display-3">Work Day Scheduler</h1>
        <p class="lead">A simple calendar app for scheduling your work day</p>
        <p id="currentDay" class="lead"></p>
      </header>
      <div class="container">
        <!-- Timeblocks go here -->
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">9 AM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">10 AM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">11 AM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">12 AM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">1 PM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">2 PM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">3 PM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">4 PM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">5 PM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
      </div>
    
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    </body>
    
    </html>

Ответы [ 4 ]

1 голос
/ 17 июня 2020

Я вижу, вы используете jQuery, если вы хотите использовать динамический c подход без использования фиксированной ширины, это будет один из способов go: 

var maxWidth = 0;
$(".input-group-prepend").each(function(){
  if( $(this).width() > maxWidth ) {
    maxWidth = $(this).width();
  }
});
$(".input-group-prepend").width(maxWidth)
$(".input-group-text").width("100%")
1 голос
/ 17 июня 2020

, поскольку я предполагаю, что вы не станете больше, чем 2 числа, а также до или после полудня, вы можете дать им всем фиксированную ширину, например width: 80px;, и, если необходимо для адаптивного дизайна, добавьте правило только для мультимедиа, чтобы уменьшить количество пикселей в зависимости от размера экрана. 

.input-group-text{
  width:80px;
}
<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
      <link rel="stylesheet" href="style.css" />
      <title>Work Day Scheduler</title>
    </head>
    
    <body>
      <header class="jumbotron">
        <h1 class="display-3">Work Day Scheduler</h1>
        <p class="lead">A simple calendar app for scheduling your work day</p>
        <p id="currentDay" class="lead"></p>
      </header>
      <div class="container">
        <!-- Timeblocks go here -->
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">9 AM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">10 AM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">11 AM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">12 AM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">1 PM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">2 PM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">3 PM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">4 PM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">5 PM</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
          </div>
        </div>
      </div>
    
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    </body>
    
    </html>
1 голос
/ 17 июня 2020

Вы можете добавить это CSS, чтобы выровнять метки времени: 

.input-group .input-group-prepend .input-group-text {
  display: inline-block;
  min-width: 95px;
  text-align: right;
}

Также убедитесь, что вы заключили форму в дополнительный контейнер, чтобы избежать изменения меток на всей странице (или на других сайтах, использующих то же CSS).

Демо: 

.input-group .input-group-prepend .input-group-text {
  display: inline-block;
  min-width: 90px;
  text-align: right;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <title>Work Day Scheduler</title>
</head>

<body>
  <header class="jumbotron">
    <h1 class="display-3">Work Day Scheduler</h1>
    <p class="lead">A simple calendar app for scheduling your work day</p>
    <p id="currentDay" class="lead"></p>
  </header>
  <div class="container">
    <!-- Timeblocks go here -->
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">9 AM</span>
      </div>
      <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
      </div>
    </div>
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">10 AM</span>
      </div>
      <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
      </div>
    </div>
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">11 AM</span>
      </div>
      <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
      </div>
    </div>
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">12 AM</span>
      </div>
      <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
      </div>
    </div>
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">1 PM</span>
      </div>
      <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
      </div>
    </div>
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">2 PM</span>
      </div>
      <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
      </div>
    </div>
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">3 PM</span>
      </div>
      <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
      </div>
    </div>
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">4 PM</span>
      </div>
      <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
      </div>
    </div>
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">5 PM</span>
      </div>
      <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary saveBtn" type="button">Button</button>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
</body>

</html>
1 голос
/ 17 июня 2020

Вы пытались указать минимальную ширину в css, чтобы решить проблему? 

.input-group-text{
   min-width: 100px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...