Question

我正在使用bootstrap。我遇到了问题。我使用以下课程：form-control和form-inlinel。这是我的HTML：

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
    <div class="center">
    <div class="label label-primary">First interval</div>
    <div class="form-inline">
        <input type="text" class="form-control" placeholder="From" id="from1">

        <input type="text" class="form-control" placeholder="To" id="to1">
    </div>
    <div class="label label-primary">Second interval</div>
    <div class="form-inline">
        <input type="text" class="form-control" placeholder="From" id="from2">

        <input type="text" class="form-control" placeholder="To" id="to2">
    </div>

    <button type="button" class="btn btn-success" id="button">Show intersection</button>

    <div class="label label-primary moveDown">
        Intersection:
    </div>
    </div>
    <div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
</div>
</body>
</html>

这是css：

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
    max-width: 100px;
    margin:0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.container-fluid
{
    padding: 20px;
    text-align: center !important;
}
.label
{
    font-size: 15px !important;
    margin-bottom: 10px !important;
}

.center
{
    width: 200px;
    margin: 0 auto;
}

.moveDown
{
    margin-top: 5px !important;
    display: block !important;
}

.label.moveDown
{
    display: inline-block !important;
}

现在关于这个问题。如果你在中等屏幕上启动html，那就完全没问题，而且正是我想要的。但是，尝试调整大小，您会发现问题。输入不满足我的东西，它在足够小的屏幕上向左移动。如果你知道如何解决这个问题请帮助我。

Answer 1

如果您将CSS的这一部分更改为：

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
   max-width: 100px;
   margin:0 auto;
   margin-top: 5px;
   margin-bottom: 5px;
}

Margin: 0 Auto;属性强制为您输入输入！

它甚至可以缩写为：

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
   max-width: 100px;
   margin:5px auto;

}

考虑到您已添加的5px保证金。

希望这有帮助！

Answer 2

Here is a fiddle

我删除了form-inline并将其更改为自己的自定义类（为了这个示例，我只是将其称为inputs）。然后我添加了简单地添加这个CSS：

.inputs {
padding-left: 3.5em;
}

您现在可以来回滑动小提琴并看到它保持在中心位置。

防止自举输入在小屏幕上向左移动

2 个答案: