ASP造型不能正常工作

我正在为我工作的公司的ASP网站工作。这是关于增加节省金钱或赚钱活动的概述，其中一位董事可以看。ASP造型不能正常工作

目前虽然我有一些样式问题，在这里使用bootstrap。

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

<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是相当正常的，但我很难从CSS文件在ASP中应用样式。

我该如何让右侧的插件连接输入字段？

UPDATE

看来，问题是里面一个默认生成的文件名为Site.css。它有以下内容：

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

评论说，解决了这个问题。

来源

2016-01-27 OmniOwl

此代码对我来说正确显示。你可以尝试使用ctrl + f5在浏览器中强制刷新，它可能会缓存旧样式。如果这不起作用，我会使用浏览器检查元素工具，并查看是否已覆盖任何地方的引导程序样式。 – Steve

页面上的其他地方一定会破坏选择框的样式，因为当我在codepen中查看您的代码段时，在Chrome和IE11中，选择框确实伸展到右侧的问号框：

codepen.io/anon/pen/pgVoQg

顺便说一句，内嵌样式通常应该尽可能地避免

来源

2016-01-27 13:21:01 danwellman

是的，我通常不应用内联样式，但ASP样式对我来说很奇怪。直接在不同的文件中应用css会有不同的结果。我会尽量把一些更多的信息。 – OmniOwl

好吧，我发现了这个问题。在默认的“网站。css“文件就是这行代码：'input， select， textarea {0}最大宽度：280px; }'所以评论一下，修正了它 – OmniOwl

如果你在多个文件中声明了css，你的参考文献将优先考虑，如果你想确保使用某种风格，你可以在风格上使用！important标签 – Steve

因为我不知道ASP的CSS结构究竟如何，这里是我会怎样处理这种情况：

使用你的浏览器的检查员来检查究竟是什么类型的css规则使“？”按钮一直到右侧，我只能假定它有一个浮点数，或者表单的右边有一个巨大的余量。

一旦您发现问题，您可以进一步使用浏览器的检查器来测试一些编辑，如果这是一个保证金事件，请查看实际需要多少保证金，如果是浮动问题，请参阅它的外观与浮动︰无

一旦你找到了问题的解决方案，你将需要应用它，做到这一点后，添加一个自定义的.css文件后，ASP的CSS文件，这种方式无论你写在它会覆盖任何现有的规则。

将修复添加到这个新文件，你应该完成。

来源

2016-01-27 13:23:44

我想通了，尽管我会评论你的答案:) – OmniOwl

ASP造型不能正常工作

回答

相关问题