Bootstrap V3: система сетки не может поместить два деления в один ряд - PullRequest
Новая
       18

Bootstrap V3: система сетки не может поместить два деления в один ряд

0 голосов
/ 26 февраля 2019 

<!doctype html>
<html>
    <head>
        <title>OptimisedForum</title>
        <link rel="stylesheet" href="../Bootstrap/setup/css/bootstrap.min.css"/>
        <script src='../Bootstrap/setup/jquery-3.3.1.min.js'></script>
        <script src='../Bootstrap/setup/js/bootstrap.js'></script>
    </head>
    <body>
        <div class='container'>
            <form class="form-horizontal">               
                <div clas="form-group">
                    <div class="col-sm-12" style="background: #999;">
                        <textarea class="form-control" placeholder="comment here" rows = 5></textarea>
                    </div>      			
		            <div class="col-sm-4" style="background: yellow">
		            	<input type="text" class="form-control" id="inputPassword3" placeholder="username"/>
		            </div>
		            <div class="col-sm-8" style="background: red">
		            	<button type="submit" class="btn btn-default">Submit</button>
		            </div>
	            </div>
	        </form>
	        <div class="col-sm-12" style="background: #123">
		        <nav aria-label="Page navigation">
					<ul class="pagination">
					    <li class="page-item">
						    <a href="#" aria-label="Previous" class="page-link">
						    <span aria-hidden= "true">&laquo;</span>
						    </a>
					    </li>
						<li class="page-item"><a class="page-link" href="#">1</a></li>
						<li class="page-item"><a class="page-link" href="#">2</a></li>
					    <li class="page-item">
					        <a class="page-link" href="#" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					        </a>
					    </li>
				    </ul>
				</nav>
			</div>
		</div>
    </body>
</html>

enter image description here

Как показано на рисунке, предполагается, что кнопка «отправить» может находиться в одной строкес именем пользователя, введенным системой сетки, но, по-видимому, это не может быть в любом случае.Я пробовал много способов сделать это, например, поместить эти два div в один «.row» и т.д., но никогда не работалИтак, мне может понадобиться помощь ваших парней.Thx

1 Ответ

0 голосов
/ 26 февраля 2019
  1. У вас не было включенного загрузчика (возможно, вы сделали, но вы не включили его во фрагмент, поскольку вы включили его из локального файла).
  2. У вас было col-sm-4, что означает, что при небольшой точке останова она будет применяться.Конечно, этот экран является большой точкой останова.Чтобы сделать их в одной строке, просто удалите -sm (сделайте его col-4).Я исправил это во фрагменте для вас.
  3. У вас всегда должна быть структура .container > .row > .col У вас есть трамплин .row

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html>

<head>
  <title>OptimisedForum</title>
  <link rel="stylesheet" href="../Bootstrap/setup/css/bootstrap.min.css" />
  <script src='../Bootstrap/setup/jquery-3.3.1.min.js'></script>
  <script src='../Bootstrap/setup/js/bootstrap.js'></script>
</head>

<body>
  <div class='container'>
    <form class="form-horizontal">
      <div clas="form-group">
        <div class="row">
          <div class="col-12" style="background: #999;">
            <textarea class="form-control" placeholder="comment here" rows=5></textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-4" style="background: yellow;">
            <input type="text" class="form-control" id="inputPassword3" placeholder="username" />
          </div>
          <div class="col-8" style="background: red;">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </div>
      </div>
    </form>
    <div class="col-12" style="background: #123">
      <nav aria-label="Page navigation">
        <ul class="pagination">
          <li class="page-item">
            <a href="#" aria-label="Previous" class="page-link">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</body>

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

Похожие темы

...