Question

使用嵌套在容器中的Bootstrap创建登录页面

我知道引导程序的工作方式是使用基于您用来查看它的设备宽度的网格系统，例如，如果我在我的Iphone上查看页面它会看起来很好，因为我的宽度手机足够小，以便容器的尺寸可以控制。

但是，如果我在桌面或ipad上查看页面，容器的宽度看起来很荒谬，因为输入字段占据了几乎整个页面的宽度。

所以我的问题是如何设置我的容器（或包含登录表单的面板）的宽度，而不会弄乱它在移动版本上的外观，这是完美的。我知道通过设置手动宽度它不起作用，因为它还设置移动设备上的宽度。有没有一种简单的方法可以做到这一点，我只是没有在文档中看到过？

Answer 1

这可能会对您有所帮助：

@media (min-width: 768px) {
    .container-small {
        width: 300px;
    }
    .container-large {
        width: 970px;
    } 
} 
@media (min-width: 992px) {
    .container-small {
        width: 500px;
    }
    .container-large {
        width: 1170px;
    } 
} 
@media (min-width: 1200px) {
    .container-small {
        width: 700px;
    }
    .container-large {
        width: 1500px;
    } 
}

.container-small, .container-large {
    max-width: 100%;
}

然后您可以使用容器小和容器大以及容器类，如此<div class="container container-small">

Answer 2

这是一个小型中间容器的代码，看起来像

这是代码

.small-middle-container{
	margin: auto;
	width: 40%;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Student Managment</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>
		<div class="small-middle-container">
			<div class="row">
				<a href="index.html">
					<button class="pull-right btn btn-success col-md-2" style="margin-top: 1em;">
					Add
					</button>
				</a>
			</div>
			<div class="form-group">
				<form>
					<div class="form-group row" id="modalElement" style="margin-top: 2em;">
						<label for="SubjectId" class="col-sm-2 col-form-label">Subject Id</label>
						<div class="col-sm-10">
							<input type="number" class="form-control" placeholder="Subject Id" required>
						</div>
					</div>
					<div class="form-group row" id="modalElement" style="margin-top: 2em;">
						<label for="SubjectName" class="col-sm-2 col-form-label">Subject Name</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" placeholder="Subject Name" required>
						</div>
					</div>
				</form>
			</div>
		</div>
	</body>
</html>

如何在bootstrap中制作一个较小的容器

2 个答案: