使用CSS

Question

我创建了一个表单，需要使其更加适合移动设备，我已经设法使用CSS，但它涉及CSS的许多@media (max-width: ;)场景。

在表单的一部分上，我有一个复选框，旁边有一个help-tip，当我向下缩放屏幕时，help-tip靠近屏幕的左侧移动，因为它＆ ＃39;使用body的左侧确定屏幕上的位置，这意味着当屏幕缩小时，help-tip最终会与文本重叠。有没有办法获得div所在的help-tip，使用复选框中的div作为距离计算器，而不是body的左侧1}？ - 因此它与复选框的末尾保持恒定距离，而不是重叠。

P.S。我使用ASP.net MVC 5，因此HTML中的代码风格不同。

以下代码： HTML：

<div class="col-sm-3">
   <div class="checkbox">
      <label>@Html.CheckBoxFor(model => model.Catering, new { @class ="checkbox" 
      })  Catering is required, <a href="~/Content/Files/Catering_Menu.pdf" 
      target="_blank"> Menu. </a></label>
    </div>
</div>
<div class="col-sm-1">
   <div class="help-tip1">
     <p>Please state catering required and list any dietary requirements.</p>
   </div>
</div>
<div class="col-sm-8">
   Additional Info for Catering:<br />
   @Html.TextAreaFor(model => model.Cateringinfo, new { @class = "form-control", 
   cols = "80%", rows = 2 })
</div>

CSS：

.help-tip1{
    position:absolute;
    top:1px;
    left:-70%;
    text-align: center;
    background-color: #272449;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 20px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    line-height: 26px;
    cursor: default;
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
    .col-sm-8 {
    width: 66.66666667%;
    }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }