css - 如何防止 Bootstrap 列在移动宽度下相互移动？

标签 css twitter-bootstrap

首先:市长感谢所有回答这类问题的人。您对尝试制作第一个独立元素的新手编码员有着巨大的影响。非常喜欢!

到目前为止，几天来我一直在尝试让我的小元素的 Bootstrap 布局按照我想要的方式运行，但我承认失败了。这是一个魔法学校的时间表生成器，如果你点击一个年份和一个科目，就会出现时间表。它出现在右侧(通过 JS)，但在移动宽度上它移动到下方而不是停留在右侧。

两列都在一个容器中，我已经设置了它们的每个类 col-xs-6 col-sm-6 col-md-6，根据我的逻辑，无论设备宽度如何，它都应该占据容器的一半，但是右侧仍然表现得好像它需要移动设备上的所有 12 个插槽并移动到下方。

问题用图片说明: enter image description here

如何修改 Bootstrap 列/行行为，以便无论设备宽度如何，左侧按钮和带有时间表的右侧按钮都保持相邻？

这是我的 codepen : 和下面的片段:

const ari = "Arithmancy";
const alc = "Alchemy";
const md = "Magical Defence";
const herb = "Herbology";
const invo = "Invocation";
const run = "Runic Magic";
const cs = "Conflux Studies";
const beast = "Beastology";
const mm = "Mind Magic";
const mt = "Magical Theory";
const rm = "Ritual Magic";
const tech = "Technomancy";

//function to show #classResult. Couldn't figure out how to make a conditional to make it appear once year and path are chosen, so injecting it manually toe very timetable conditional instead        
function show() {
    document.querySelector("#intro").style.display = "none";
    document.querySelector("#classResult").style.visibility = "visible";
}

$(document).ready(function () {
    $('input[type="radio"]').on("change", function () {
        //making chosen radio options to variables
        const $year = $('input[name="year"]:checked');
        const $path = $('input[name="path"]:checked');


        //updating html in #classResult
        //JUNIOR
        if ($year.val() == "junior" && $path.val() == "artificer") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(md);
            $("#lesson2").html(ari);
            $("#lesson3").html(mt);
            $("#lesson4").html(tech);
            $("#lesson5").html(run);
            $("#lesson6").html(cs);

        } else if ($year.val() == "junior" && $path.val() == "cursebreaker") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(invo);
            $("#lesson2").html(ari);
            $("#lesson3").html(mt);
            $("#lesson4").html(rm);
            $("#lesson5").html(run);
            $("#lesson6").html(cs);

        } else if ($year.val() == "junior" && $path.val() == "crypto") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(invo);
            $("#lesson2").html(beast);
            $("#lesson3").html(herb);
            $("#lesson4").html(rm);
            $("#lesson5").html(mm);
            $("#lesson6").html(alc);

        } else if ($year.val() == "junior" && $path.val() == "healer") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(md);
            $("#lesson2").html(beast);
            $("#lesson3").html(herb);
            $("#lesson4").html(rm);
            $("#lesson5").html(mm);
            $("#lesson6").html(alc);

        } else if ($year.val() == "junior" && $path.val() == "guardian") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(md);
            $("#lesson2").html(beast);
            $("#lesson3").html(mt);
            $("#lesson4").html(tech);
            $("#lesson5").html(mm);
            $("#lesson6").html(cs);


            //SOPHOMORE
        } else if ($year.val() == "sophomore" && $path.val() == "artificer") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(run);
            $("#lesson2").html(cs);
            $("#lesson3").html(md);
            $("#lesson4").html(ari);
            $("#lesson5").html(mt);
            $("#lesson6").html(tech);

        } else if ($year.val() == "sophomore" && $path.val() == "cursebreaker") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(run);
            $("#lesson2").html(cs);
            $("#lesson3").html(invo);
            $("#lesson4").html(ari);
            $("#lesson5").html(mt);
            $("#lesson6").html(rm);

        } else if ($year.val() == "sophomore" && $path.val() == "crypto") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(mm);
            $("#lesson2").html(alc);
            $("#lesson3").html(invo);
            $("#lesson4").html(beast);
            $("#lesson5").html(herb);
            $("#lesson6").html(rm);

        } else if ($year.val() == "sophomore" && $path.val() == "healer") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(mm);
            $("#lesson2").html(alc);
            $("#lesson3").html(md);
            $("#lesson4").html(beast);
            $("#lesson5").html(herb);
            $("#lesson6").html(rm);

        } else if ($year.val() == "sophomore" && $path.val() == "guardian") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(mm);
            $("#lesson2").html(cs);
            $("#lesson3").html(md);
            $("#lesson4").html(beast);
            $("#lesson5").html(mt);
            $("#lesson6").html(tech);


            //SENIOR
        } else if ($year.val() == "senior" && $path.val() == "artificer") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(mt);
            $("#lesson2").html(tech);
            $("#lesson3").html(run);
            $("#lesson4").html(cs);
            $("#lesson5").html(md);
            $("#lesson6").html(ari);

        } else if ($year.val() == "senior" && $path.val() == "cursebreaker") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(mt);
            $("#lesson2").html(rm);
            $("#lesson3").html(run);
            $("#lesson4").html(cs);
            $("#lesson5").html(invo);
            $("#lesson6").html(ari);

        } else if ($year.val() == "senior" && $path.val() == "crypto") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(herb);
            $("#lesson2").html(rm);
            $("#lesson3").html(mm);
            $("#lesson4").html(alc);
            $("#lesson5").html(invo);
            $("#lesson6").html(beast);

        } else if ($year.val() == "senior" && $path.val() == "healer") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(herb);
            $("#lesson2").html(rm);
            $("#lesson3").html(mm);
            $("#lesson4").html(alc);
            $("#lesson5").html(md);
            $("#lesson6").html(beast);

        } else if ($year.val() == "senior" && $path.val() == "guardian") {
            show(); //displaying the hidden "classResult"
            $("#lesson1").html(mt);
            $("#lesson2").html(tech);
            $("#lesson3").html(mm);
            $("#lesson4").html(cs);
            $("#lesson5").html(md);
            $("#lesson6").html(beast);

        }

    });
});
body {
    background-image: url(https://t-ec.bstatic.com/images/hotel/max1024x768/106/106458589.jpg);
    background-size: cover;
    width: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: 'Poppins', serif;

}

/* background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% ); 
}*/


.container.main {
  width: 60%;
    min-width: 300px;
    background-color: #fffef5;
    background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-light.png");
  padding-bottom: 2%;
}


h1 {
    font-size: 4em;
    padding-top: 2%;
    text-align: center;
    /*    color:white !important; */
    font-family: 'Cinzel', serif;
}


#classResult {
    visibility: hidden;
    padding: 20px 0px;
    /* background-color: rgba(255,255,255, 0.7);  */
    flex: 50%;
    text-align: center;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 1.1rem;
}

#intro {
    visibility: visible !important;
}

.time {
    color: gray;
    font-size: 0.8rem;
}

#lunch-wrapper .time {
  padding-top: 5%;
}

.lesson {
    margin-bottom: 6%;
    margin-top: -3%;
    font-weight: 500;
    color: rgb(52, 58, 85);
}

#lunch-wrapper {
border: 1px rgba(195, 185, 185, 0.445) solid;
border-radius: 15px;
margin-right: 10%;
margin-bottom: 6%;

}

.btn:focus {
    background-color: #8D69AD;

}

.btn {
    width: 150px !important;
}

.btn-secondary:not(:disabled):not(.disabled).active {
    background-color: #8D69AD !important;
}


/*   #classResult{
      margin-top: 5%;
  } */
/* making content 100% wide on mobile */
@media only screen and (max-width: 720px) {
    .container.main {
        width: 100%;
    }
  
  .lesson {
    margin-bottom: 3%;
    margin-top: -1%;

}

}
<!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">
  <!-- My CSS -->
  <link rel="stylesheet" href="css/custom.css">
  <!-- 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">
  <!--jQuery -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
  <link rel="icon" type="image/png" href="favicon.png">

  <link href="https://fonts.googleapis.com/css?family=Cinzel|ZCOOL+XiaoWei|Poppins" rel="stylesheet">
  <title>Czocha Timetable</title>
</head>


<body>

  <div class="container main">
    <h1>Czocha Timetable</h1>


    <div class="col-container">
      <div class="row">
        <div class="col-xs-6 col-md-6 col-sm-6">

          <div class="year-sample" style="background: none">
            <p>Select your year:</p>
            <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
              <label class="btn btn-secondary rounded">
                <input type="radio" name="year" id="junior" value="junior"> Junior
              </label>
              <label class="btn btn-secondary rounded mt-1">
                <input type="radio" name="year" id="sophomore" value="sophomore"> Sophomore
              </label>
              <label class="btn btn-secondary rounded mt-1">
                <input type="radio" name="year" id="senior" value="senior"> Senior
              </label>
            </div>
          </div>


          <div class="path-sample" style="background: none">
            <p>Select your path:</p>
            <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">

              <label class="btn btn-secondary rounded">
                <input type="radio" name="path" id="artificer" value="artificer"> Artificer
              </label>
              <label class="btn btn-secondary rounded mt-1">
                <input type="radio" name="path" id="healer" value="healer"> Healer
              </label>
              <label class="btn btn-secondary rounded mt-1">
                <input type="radio" name="path" id="crypto" value="crypto"> Cryptozoologist
              </label>
              <label class="btn btn-secondary rounded mt-1">
                <input type="radio" name="path" id="guardian" value="guardian"> Guardian
              </label>
              <label class="btn btn-secondary rounded mt-1">
                <input type="radio" name="path" id="cursebreaker" value="cursebreaker"> Curse Breaker
              </label>
            </div>

          </div>

        </div>



        <!-- Timetable display #classResult  -->
        <div class="col-md-6 col-sm-6 col-xs-6" id="classResult">

          <div id="intro">Summon your classes!</div>

          <div class="time">9:15 - 10:00</div>
          <div class="lesson" id="lesson1"></div>

          <div class="time">10:15 - 11:00</div>
          <div class="lesson" id="lesson2"></div>

          <div class="time">11:15 - 12:00</div>
          <div class="lesson" id="lesson3"></div>

          <div id="lunch-wrapper">
            <div class="time">12:00 - 14:00</div>
            <div class="lesson">DAY BREAK</div>
          </div>

          <div class="time">14:15 - 15:00</div>
          <div class="lesson" id="lesson4"></div>

          <div class="time">15:15 - 16:00</div>
          <div class="lesson" id="lesson5"></div>

          <div class="time">16:15 - 17:00</div>
          <div class="lesson" id="lesson6"></div>


        </div>

      </div>

    </div>

    <!-- My JS -->
    <script src="javascript.js"></script>
    <!-- jQuery & 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
    </script>
    <!-- ends content-->


  </div>
</body>

</html>

非常感谢任何抽出宝贵时间来看这个笨蛋 Nerd 的小元素成果的人!

最佳答案

似乎“col-xs-6”在 Bootstrap 4 中不存在。 您必须输入“col-6”而不是“col-xs-6”。 以下是 Bootstrap 4 中的网格选项:https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

此代码应该适用于您的列。

<div class="col-6 col-md-6 col-sm-6">

写这段代码也够了:

<div class="col-6">

关于css - 如何防止 Bootstrap 列在移动宽度下相互移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59361533/

上一篇：html - 一次具有两种定位类型的元素

下一篇：javascript - 如何在我的 Electron 应用程序上使用 PDFTron WebViewer？

相关文章：

html - 语义 UI 中心对齐登录框？

javascript - Bootstrap shown.bs.tab 事件不工作

html - flex-basis 和 box-sizing

jquery - 使用 jQuery 设计选择框的简单方法

javascript - Highcharts 同步不水平工作

html - 左边距相等的 Bootstrap 列

twitter-bootstrap - Bootstrap 4 alpha 支持 glyphicon 吗？

html - 无法按我想要的方式放置元素

javascript - Bootstrap 主题的模块化和可采纳性

css - 缩小浏览器宽度时更改为垂直菜单

©2024 IT工具网  联系我们