Question

我正在尝试在Bootstrap 3中创建一个带有内联表单并带有input-group-addon的页面。但是，页面上的元素未按要求对齐。我尝试了很多事情，但没有结果。

页面由两列组成。在第一列中有一个按钮，称为“按钮1”。在第二列中是文本字段“价格”，上面附加了欧元符号和一个称为“按钮2”的按钮。最后三个元素右对齐。目的是在非常小的屏幕（xs）上，带有欧元符号和第二个按钮的文本字段跳到第一个按钮下面，但是带有欧元符号和第二个按钮的文本字段应该保持彼此相邻。在非常小的屏幕上，两列都可能左对齐。但是，在很小的屏幕上，欧元符号似乎向右对齐，按下文本字段下方的第二个按钮。

我已经创建了一个测试页面，您可以通过以下URL查看该页面： https://dev.velgenweb.be/test.html

代码如下：

/* Conditional pull-right */
@media (max-width: 767px) {
    .pull-right.pull-left-xs {
        float: left !important;
    }
}   
@media (min-width: 768px) and (max-width: 991px) {
    .pull-right.pull-left-sm {
        float: left !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pull-right.pull-left-md {
        float: left !important;
    }
}
@media (min-width: 1200px) {
    .pull-right.pull-left-lg {
        float: left !important;
    }
}

#price {
    width: 78px;
}

<!DOCTYPE html>
<html>
<head>
<title>Input group addon</title>
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/test.css">
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-1 hidden-xs hidden-sm" id="desktop_left">

        </div>
        <div class="col-xs-12 col-md-9">

            <div class="panel-group" id="header">
                <div class="panel panel-default" id="control_panel">
                    <div class="panel-body">

                        <form class="form-inline" role="form" action="/test.html" method="post">

                            <div class="row">
                                <div class="col-sm-6">
                                    <button type="button" class="btn btn-default">Button 1</button>
                                </div>
                                <div class="col-sm-6">
                                    <div class="pull-right pull-left-xs">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="price" name="price" placeholder="price" maxlength="6" />
                                                <span class="input-group-addon" id="price_addon">&euro;</span>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-default" id="button">Button 2</button>
                                    </div>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>

            <main role="main">

                <div class="panel panel-default">
                    <div class="panel-body">
                        This is a test page.
                    </div>
                </div>

            </main>

        </div>
        <div class="col-md-2 hidden-xs hidden-sm" id="desktop_right">

        </div>
    </div>
</div>

</body>
</html>


How can I solve this problem?
Thanks in advance for the tips and suggestions.

With kind regards,
Kristof

内联形式的输入组附加组件未正确对齐

0 个答案: