Изменение размера страницы ниже 1200 пикселей приводит к смещению содержимого

Я все еще новичок в веб-разработке и нахожусь на начальной стадии работы над этим проектом. Моя проблема прямо сейчас заключается в том, что при изменении размера моего дисплея ниже 1200 пикселей содержимое моей второй формы с левой стороны смещается. Содержание ТЕКСТА изменяется с 2 строк на 3 строки и заставляет нижнюю часть расширяться дальше, чем правая сторона. Пытаемся найти способ сохранить контент даже внизу при изменении размера страницы.

var toggle = function(){
	var exists = document.querySelector("#existButton");
	console.info(exists.innerHTML);


	if (exists.classList.contains("btn-warning")){
		exists.classList.remove("btn-warning");
		exists.classList.add("btn-info");
		exists.innerHTML = "copy";
		//document.getElementById("#existButton").innerHTML = 'check'
	} else {
		exists.classList.remove("btn-info");
		exists.classList.add("btn-warning");
		exists.innerHTML = "check";
		//document.getElementById("#existButton").innerHTML = 'copy'
	}

	
	

}

body{
	background: repeating-linear-gradient(
		to right,
		#050210,
		#050210 50px,
		#271f41 50px,
		#271f41 100px
	)
}
.jumbotron {
	margin-bottom: 0;
	background-color: #cbd0d3;

}

.container .jumbotron{
	border-radius: 0px;
}
.navbar{
	margin-bottom: 0;
	background-color: #44abe2;
	margin-top: 30px;

}

.navbar-default .navbar-nav>li>a {
	color: white;

}

.navbar .navbar-default {
	border-radius: 0px;
}

.navbar-default .navbar-brand{
	color: white;
}

.automatic {
	background-color: #6e8a99;
	padding-bottom: 40px;
	border-bottom-left-radius: 6px;
}

.manual {
	background-color: #83929a;
	padding-bottom: 40px;
	border-bottom-right-radius: 6px;
}

<!doctype html>
<html lang = "en">
  <head>
    <!-- Required meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel = "stylesheet" href = "bootstrap/bootstrap.min.css">
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">


    <link rel = "stylesheet" href = "style.css">


    <title>Mailbox Creator</title>
  </head>


  <div class = "container">


    <nav class = "navbar navbar-default" style = "border-radius: 6px 6px 0px 0px">
  <div class = "container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1" aria-expanded = "false">
        <span class = "sr-only">Toggle navigation</span>
        <span class = "icon-bar"></span>
        <span class = "icon-bar"></span>
        <span class = "icon-bar"></span>
      </button>
      <a class = "navbar-brand" href = "#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1">
      <ul class = "nav navbar-nav">
        
        
        <li class = "dropdown">
          <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Mailbox Management <span class = "caret"></span></a>
          <ul class = "dropdown-menu">
            <li><a href = "#">User Mailbox Management</a></li>
            <li><a href = "#">Resource Mailbox Management</a></li>
            <li><a href = "#">Mailbox Update Management</a></li>            
          </ul>
        </li>
      </ul>
      
      <ul class = "nav navbar-nav navbar-right">
        <li><a href = "#">Hello $username</a></li>
        
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



  <div class = "jumbotron">
    <h1 class = "text-center">Mailbox Creator Pro</h1>
  </div>

  <!--  ***************************************** -->
  <!--  **********  Automatic Forms ************* -->
  <!--  ***************************************** -->
  <div class = "container">
  <div class = "row">
    <div class = "col-md-6 automatic">
      <form>
        <!-- <div class = "form-group text-center">
          <label><u>Automatic</u></label>
        </div> -->
        <h4 class = "text-center pb-2"><u>Automatic</u></h4>
        <div class = "form-group row">
          <label class = "col-md-3 col-form-label ml-2" for = "accountName">Account Name</label>
          <div class = "col-md-6">
            <input class = "form-control form-control-sm " type = "text" name = "accountNameAuto" value = "" placeholder = "Account number">
          </div>  
          <div class = "col-md-2">
            <button type = "submit" class = "btn btn-success btn-sm ">Create</button>
          </div>
        </div>    
      </form>
      <form>
        <div class = "form-group row">
          <label class = "col-md-3 col-form-label ml-2" for = "emailCheckAutomatic" style = "min-width: 140px">Does account have email?</label>
          <div class = "col-md-6 mt-3">
            <input class = "form-control form-control-sm" type = "text" name = "emailCheckAutomatic" value = "" placeholder = "check for email account">
          </div>
          <div class = "col-md-2">
            <button type = "submit" class = "btn btn-info btn-sm mt-3">Check</button>
          </div>
        </div>
      </form>
      <textarea class = "form-control form-control-sm mb-1" ></textarea>


    </div>


  <!--  ***************************************** -->
  <!--  **********  Manual Form  ***************** -->
  <!--  ***************************************** -->
    <div class = "col-md-6 manual">
      <form>
        <!-- <div class = "form-group text-center">
          <label><u>Manual</u></label>
        </div> -->
        <h4 class = "text-center pb-2"><u>Manual</u></h4>
        <div class = "form-group row">
          <label class = "col-md-1 col-form-label ml-1 " for = "accountName">Email</label>
          <div class = "col-md-5">
            <input class = "form-control form-control-sm " type = "text" name = "accountNameManual" value = "" placeholder = "Email">
          </div>
          <label class = "col-md-2 col-form-label" for = "accountName">Account</label>
          <div class = "col-md-2">
            <input class = "form-control form-control-sm" type = "text" name = "" value = "" placeholder = "S#">
          </div>
          <div class = "col-md-1">
            <button type = "submit" class = "btn btn-success btn-sm">Create</button>
          </div>
        </div>        
      </form>


      <form>
        <div class = "form-group row">
          <label class = "col-md-1 col-form-label ml-1" for = "emailCheckAutomatic">Email exist?</label>
          <div class = "col-md-5 mt-3">
            <input class = "form-control form-control-sm" type = "text" name = "emailCheckAutomatic" value = "" placeholder = "check for email account">
          </div>
          <div class = "col-md-4 mt-3">
            <button type = "submit" class = "btn btn-info btn-sm" id = "existButton" onclick = "toggle()">Check</button>
          </div>
          <div class = "col-md-1 mt-3">
            <button type = "submit" class = "btn btn-warning btn-sm"  >Copy</button>
          </div>
        </div>
      </form>
      <textarea class = "form-control form-control-sm mb-1" ></textarea>
    </div>

  </div><!-- End Row -->
</div>




</div><!-- End Container -->


  




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>

    <script src = "scripts/script.js"></script>
  </body>
</html>

html css twitter-bootstrap-3

14.03.2018 19:02

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Имя учетной записи слишком длинное, поэтому, если вы добавите padding-right:0; к этому элементу, у него будет достаточно места.

Проверьте мой фрагмент в полностраничном режиме.

var toggle = function(){
	var exists = document.querySelector("#existButton");
	console.info(exists.innerHTML);


	if (exists.classList.contains("btn-warning")){
		exists.classList.remove("btn-warning");
		exists.classList.add("btn-info");
		exists.innerHTML = "copy";
		//document.getElementById("#existButton").innerHTML = 'check'
	} else {
		exists.classList.remove("btn-info");
		exists.classList.add("btn-warning");
		exists.innerHTML = "check";
		//document.getElementById("#existButton").innerHTML = 'copy'
	}

	
	

}

body{
	background: repeating-linear-gradient(
		to right,
		#050210,
		#050210 50px,
		#271f41 50px,
		#271f41 100px
	);
}
.jumbotron {
	margin-bottom: 0;
	background-color: #cbd0d3;

}

.container .jumbotron{
	border-radius: 0px;
}
.navbar{
	margin-bottom: 0;
	background-color: #44abe2;
	margin-top: 30px;

}

.navbar-default .navbar-nav>li>a {
	color: white;

}

.navbar .navbar-default {
	border-radius: 0px;
}

.navbar-default .navbar-brand{
	color: white;
}

.automatic {
	background-color: #6e8a99;
	padding-bottom: 40px;
	border-bottom-left-radius: 6px;
}

.manual {
	background-color: #83929a;
	padding-bottom: 40px;
	border-bottom-right-radius: 6px;
}
#ml-2{
  padding-right:0;
}

<!doctype html>
<html lang = "en">
  <head>
    <!-- Required meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel = "stylesheet" href = "bootstrap/bootstrap.min.css">
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">


    <link rel = "stylesheet" href = "style.css">


    <title>Mailbox Creator</title>
  </head>


  <div class = "container">


    <nav class = "navbar navbar-default" style = "border-radius: 6px 6px 0px 0px">
  <div class = "container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1" aria-expanded = "false">
        <span class = "sr-only">Toggle navigation</span>
        <span class = "icon-bar"></span>
        <span class = "icon-bar"></span>
        <span class = "icon-bar"></span>
      </button>
      <a class = "navbar-brand" href = "#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1">
      <ul class = "nav navbar-nav">
        
        
        <li class = "dropdown">
          <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Mailbox Management <span class = "caret"></span></a>
          <ul class = "dropdown-menu">
            <li><a href = "#">User Mailbox Management</a></li>
            <li><a href = "#">Resource Mailbox Management</a></li>
            <li><a href = "#">Mailbox Update Management</a></li>            
          </ul>
        </li>
      </ul>
      
      <ul class = "nav navbar-nav navbar-right">
        <li><a href = "#">Hello $username</a></li>
        
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



  <div class = "jumbotron">
    <h1 class = "text-center">Mailbox Creator Pro</h1>
  </div>

  <!--  ***************************************** -->
  <!--  **********  Automatic Forms ************* -->
  <!--  ***************************************** -->
  <div class = "container">
  <div class = "row">
    <div class = "col-md-6 automatic">
      <form>
        <!-- <div class = "form-group text-center">
          <label><u>Automatic</u></label>
        </div> -->
        <h4 class = "text-center pb-2"><u>Automatic</u></h4>
        <div class = "form-group row">
          <label class = "col-md-3 col-form-label" id = "ml-2" for = "accountName">Account Name</label>
          <div class = "col-md-6">
            <input class = "form-control form-control-sm " type = "text" name = "accountNameAuto" value = "" placeholder = "Account number">
          </div>  
          <div class = "col-md-2">
            <button type = "submit" class = "btn btn-success btn-sm ">Create</button>
          </div>
        </div>    
      </form>
      <form>
        <div class = "form-group row">
          <label class = "col-md-3 col-form-label ml-2" for = "emailCheckAutomatic" style = "min-width: 140px">Does account have email?</label>
          <div class = "col-md-6 mt-3">
            <input class = "form-control form-control-sm" type = "text" name = "emailCheckAutomatic" value = "" placeholder = "check for email account">
          </div>
          <div class = "col-md-2">
            <button type = "submit" class = "btn btn-info btn-sm mt-3">Check</button>
          </div>
        </div>
      </form>
      <textarea class = "form-control form-control-sm mb-1" ></textarea>


    </div>


  <!--  ***************************************** -->
  <!--  **********  Manual Form  ***************** -->
  <!--  ***************************************** -->
    <div class = "col-md-6 manual">
      <form>
        <!-- <div class = "form-group text-center">
          <label><u>Manual</u></label>
        </div> -->
        <h4 class = "text-center pb-2"><u>Manual</u></h4>
        <div class = "form-group row">
          <label class = "col-md-1 col-form-label ml-1 " for = "accountName">Email</label>
          <div class = "col-md-5">
            <input class = "form-control form-control-sm " type = "text" name = "accountNameManual" value = "" placeholder = "Email">
          </div>
          <label class = "col-md-2 col-form-label" for = "accountName">Account</label>
          <div class = "col-md-2">
            <input class = "form-control form-control-sm" type = "text" name = "" value = "" placeholder = "S#">
          </div>
          <div class = "col-md-1">
            <button type = "submit" class = "btn btn-success btn-sm">Create</button>
          </div>
        </div>        
      </form>


      <form>
        <div class = "form-group row">
          <label class = "col-md-1 col-form-label ml-1" for = "emailCheckAutomatic">Email exist?</label>
          <div class = "col-md-5 mt-3">
            <input class = "form-control form-control-sm" type = "text" name = "emailCheckAutomatic" value = "" placeholder = "check for email account">
          </div>
          <div class = "col-md-4 mt-3">
            <button type = "submit" class = "btn btn-info btn-sm" id = "existButton" onclick = "toggle()">Check</button>
          </div>
          <div class = "col-md-1 mt-3">
            <button type = "submit" class = "btn btn-warning btn-sm"  >Copy</button>
          </div>
        </div>
      </form>
      <textarea class = "form-control form-control-sm mb-1" ></textarea>
    </div>

  </div><!-- End Row -->
</div>




</div><!-- End Container -->


  




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>

    <script src = "scripts/script.js"></script>
  </body>
</html>

Спасибо, что устранили мою проблему. Я удалил отступы на обеих формах, и у меня это сработало. Извините, я выбрал неправильный загрузочный CDN для ответа на этот вопрос.

— 14.03.2018 20:01

14.03.2018 19:36