ASP 样式无法正常工作

Question

我正在为我工​​作的公司开发一个 ASP 网站。这是关于在其中一位董事可以查看的概览中添加省钱或赚钱活动。

目前虽然我有一些样式问题，但在这里使用引导程序。

我相信我曾经遇到过这个问题，但我是如何解决它的。我无法将所有元素居中，也无法使输入框与右侧的插件连接，如图所示。

<div class="container body-content" style="padding-top: 15px;">
    <div class="container" align="center">
        <div class="col-lg-8">
            <div class="row">
                <h2>Abstract</h2>
                <div class="form-group">
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">FYE</span>
                        <select class="form-control required" id="new-activity-fye-dropdown">
                            <option value="1">On Track</option>
                            <option value="2">Issue</option>
                            <option value="3">Behind</option>
                        </select>
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top" title="The Full Year Expectation of the Activity. Usually On Track on creation.">
                            <b>?</b>
                        </span>
                    </div>
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">Activity Name</span>
                        <input type="text" class="form-control required" id="new-activity-modal-name-field"
                            aria-describedby="new-activity-modal-name-field" />
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="The Name of the Activity. This name appears in the Activity Overview.">
                            <b>?</b>
                        </span>
                    </div>
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">Responsible</span>
                        <input type="text" class="form-control required" id="new-activity-modal-responsible-field"
                            aria-describedby="new-activity-modal-responsible-field" disabled />
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="The responsible person for this activity. This it the go-to person for questions, progress and reports.">
                            <b>?</b>
                        </span>
                    </div>
                    <!-- TODO: Find an automatic way to make this dropdown -->
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">Department</span>
                        <select class="form-control required" id="new-activity-modal-department-dropdown">
                            <!-- Handled in content-controller: CreateNewActivityDepartmentDropdown() -->
                        </select>
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="The department this activity belongs to.">
                            <b>?</b>
                        </span>
                    </div>
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">Start Time</span>
                        <input class="form-control" type="text" id="new-activity-modal-datepicker-start" />
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="The start of the activity. Usually today's date.">
                            <b>?</b>
                        </span>
                    </div>
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">End Time</span>
                        <input class="form-control" type="text" id="new-activity-modal-datepicker-end" />
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="The estimated end of the activity.">
                            <b>?</b>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row">
                <h2>Description</h2>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">Upload a thorough description explaining the Activity.</span>
                    </div>

                </div>
            </div>
            <div class="row">
                <h2>Estimation</h2>
                <div class="form-group">
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">AX Account Number(s)</span>
                        <input type="text" class="form-control required" id="new-activity-modal-ax-account-numbers-field"
                            aria-describedby="new-activity-modal-ax-account-numbers-field" />
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="AX Account number associated with the activity. 
                                              Multiple accounts can be added separated by commas.">
                            <b>?</b>
                        </span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">Upload the estimation calculations for the Activity.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我觉得我的 HTML 相当正常，但我一开始就很难在 ASP 中应用 CSS 文件中的样式。

如何使右侧的插件与输入字段连接？

更新

看来问题出在名为Site.css 的默认生成文件中。它包含以下内容：

input,
select,
textarea {
    max-width: 280px;
}

注释掉这个问题就解决了。

Answer 1

由于我不知道 ASP 的 css 结构究竟是怎样的，所以我将如何处理这种情况：

使用浏览器的检查器来检查究竟是什么类型的 css 规则正在生成“？”按钮一直向右，我只能假设它有一个浮动，或者表单在它的右边有很大的边距。

一旦你发现了问题，你可以使用浏览器的检查器进一步测试一些编辑，如果它是一个边距，看看它实际需要多少边距，如果它是一个浮动问题，看看它的外观浮动：无

一旦您找到了问题的解决方案，您就需要应用它，为此在 ASPs css 文件之后添加一个自定义 .css 文件，这样您在其中写入的任何内容都会覆盖任何现有规则。

将修复添加到这个新文件中，您应该就完成了。

Answer 2

页面上的其他地方一定有一些东西破坏了选择框的样式，因为当我在 Chrome 和 IE11 中的 codepen 中查看你的 sn-p 时，选择框确实会延伸到问号框对：

codepen.io/anon/pen/pgVoQg

顺便说一句，通常应该尽可能避免使用内联样式