js和css冲突问题？答案

【问题标题】：Js and css conflict issue?js和css冲突问题？
【发布时间】：2021-12-10 17:38:24
【问题描述】：

我正在使用来自https://www.codeply.com/go/bp/K3nDDRQGRd 的按钮，但它看起来不像那里。

我认为保存的更改与 css 冲突。我怎样才能防止这种情况发生？

除此之外，我不能同时选择顶部按钮的选项和底部按钮的选项。由于 js 或 css 冲突，如果您能帮助我，我将非常高兴。

@Html.Label("Status")
              </br>
              <div class="btn-group btn-toggle" data-toggle="buttons">
                  <label class="btn btn-primary active">
                      <input type="radio" class="message_pri" name="options" value="1"> 1
                  </label>
                  <label class="btn btn-default">
                      <input type="radio" class="message_pri" name="options" value="0" checked=""> 0
                  </label>
              </div>
              </br>

@Html.Label("Anasayfada görünsün mü?")
              </br>
              <div class="btn-group btn-toggle" data-toggle="buttons">
                  <label class="btn btn-primary active">
                      <input type="radio" class="message_sh" name="options" value="True"> True
                  </label>
                  <label class="btn btn-default">
                      <input type="radio" class="message_sh" name="options" value="False" checked=""> False
                  </label>
              </div>


              <div class="modal-footer">
                  <button class="btn btn-light-primary font-weight-bold" onclick="Tabloyaekle()">Save changes</button>
                  <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>


              </div>

第二个问题我想将 True False 值发送到数据库。我应该发送其他东西而不是价值吗？

【问题讨论】：

您既没有添加脚本也没有添加样式。
项目中除了js和html代码没有得到任何东西，还有什么需要补充的吗？
不知道是不是冲突的问题？我想这不可能是链接缺陷，对吧？我的英语不好，所以我无法解释我的问题。
除此之外，我不能同时选择顶部按钮的选项和底部按钮的选项。因为您为所有收音机提供了相同的 name。无线电按name 属性分组。
我需要包含 boostrap 3.4.1 链接吗？我加了，但是项目在变，没有改善:')

标签： javascript css ajax

【解决方案1】：

如果你使用 bootstrap 那么你不需要使用任何额外的 js 和 css

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Button Group</title>
  </head>
  <body>
  Status<br />
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> 0
  </label>
  </div>
  <br /><br />
  Anasayfada görünsün mü?<br />
  
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> True
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> False
  </label>
  
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

【讨论】：