twitter-bootstrap 如何在引导程序中制作更小的容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20984874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a smaller container in bootstrap
提问by user2989367
Im making a login page using Bootstrap that is nested in a container
我使用嵌套在容器中的 Bootstrap 制作登录页面
I know that the way that bootstrap works is with a grid system based on the width of the device you are using to view it on so for example if Im viewing the page on my Iphone it will look fine because the width of my phone is small enough so that the container is of manageable size.
我知道引导程序的工作方式是基于您用来查看它的设备宽度的网格系统，例如，如果我在我的 Iphone 上查看页面，它看起来会很好，因为我的手机宽度很小足以使容器具有可管理的大小。
However if I view the page on either a desktop or an ipad, the width of the container looks ridiculous because the Input fields take the width of nearly the entire page.
但是，如果我在桌面或 ipad 上查看页面，容器的宽度看起来很荒谬，因为输入字段几乎占据了整个页面的宽度。
So my question is how could I set a width to my container (or the panel that contains the login form) without messing with the way it looks on the mobile version right now which is perfect. I know that by setting a manual width to it doesnt work because it also sets the width on the mobile device. Is there a simple way to do this that I just havent seen in the documentation?
所以我的问题是如何为我的容器（或包含登录表单的面板）设置宽度，而不会弄乱它现在在移动版本上的外观，这是完美的。我知道通过设置手动宽度是行不通的，因为它还设置了移动设备上的宽度。有没有一种简单的方法可以做到这一点，而我只是在文档中没有看到？
回答by DarkteK
This might help you:
这可能会帮助您：
@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%;
}
Then you can use the classes: container-smalland container-largealongside the containerclass, like so <div class="container container-small">
然后你可以在容器类旁边使用类：container-small和container-large，就像这样<div class="container container-small">
回答by Pooja Jhadhav
This is a code for a small middle container which would look something like 
这是一个小型中间容器的代码，看起来像
Here is the code
这是代码
.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>