我有以下代码：.global-wrap{display:flex;flex-direction:row;align-items:center;justify-content:center;}.header{width:1024px;background-color:purple;padding:7px;边距：0;}div{溢出：隐藏;空白：nowrap

默认情况下， .form-check 类显示为块，这意味着在常规流程中它会移动到自己的行。要创建内联表单检查，请在 .form-check 类旁边使用 .form-check-inline 类。请参阅 https://getbootstrap.com/docs/5.0/forms /checks-radios/#inline ...

为什么在div中，Bootstrap开关不与其他元素在同一行显示？

我有以下代码：

.global-wrap {
  显示：柔性；
  弯曲方向：行；
  对齐项目：居中；
  调整内容：居中；
}

. header {
  宽度：1024px；
  背景颜色：紫色；
  内边距：7px；
  保证金：0；
}

div {
  溢出：隐藏；
  空白：nowrap；
}

.内容 svg {
  高度：25 像素；
  宽度：25 像素；
  垂直对齐：居中；
}

.内容.标题{
  白颜色;
  保证金：0；
  字体大小：16px；
  垂直对齐：居中；
  左边距：15px；
}

.内容.switch {
  对齐内容：右；
}</pre>
<pre class="brush:html;toolbar:false;"><head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOMLASjC" crossorigin= “匿名”>
</头>

<div class="global-wrap">
  <div class="header">
    
      <div class="form-inline">
        <div class="form-group">
          <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-list" viewBox="0 0 16 16 “>
                        <路径 fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1- .5-.5z"/>
                    </svg>
          标题
          <span class="form-check form-switch">
                        
                        文本;
                    </span>

为什么在div中，Bootstrap开关不与其他元素在同一行显示？

全部回复(1)我来回复