js和css冲突问题？

Question

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

Screenshot of my appearance

我认为保存的更改与 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>

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

Answer 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>

js和css冲突问题？

Js and css conflict issue?

javascript

css

ajax