Question

<!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>

如图所示，假定“提交”按钮可以与网格系统输入的“用户名”位于同一行，但看起来无论如何都不能。我尝试了许多方法来完成此操作，例如将这两个div放在一个“ .row”等中，但是从不工作。所以，我可能需要你们的帮助。谢谢

Answer 1

您没有包含引导程序（也许是，但是您没有在代码段中，因为您从本地文件中包含了它）。
您有col-sm-4，这意味着在较小的断点处将适用。当然，此屏幕是很大的断点。要使它们在同一行上，只需除去-sm（使其成为col-4）即可。我已为您修复了代码段中的问题。
您应该始终使用.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>

Bootstrap V3：网格系统无法将两个div排成一行

1 个答案: