标签: twitter-bootstrap

根据Google选择控件（复选框、单选按钮、开关）的材料指南，这些输入字段应如下所示：

v3.x 的 Bootstrap Paper 主题（现在在 v4 中称为 Materia）的样式旨在达到此设计目标

在 Chrome 中，输入的风格化是正确的，但所有其他浏览器只是回退到本机输入控件，这破坏了设计隐喻的一致性。

这是jsFiddle / Stack Snippets中的 MCVE ，它的工作/失败取决于浏览器：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" rel="stylesheet"/>


<div class="checkbox">
  <label><input type="checkbox" value="check1"/> Check Opt 1 </label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="check2" checked/> Check Opt 2</label>
</div>

<div class="radio">
  <label><input type="radio" value="radio1" name="grp1" />Radio Opt 1</label>
</div>
<div class="radio">
  <label><input type="radio" value="radio2" name="grp1" checked/>Radio Opt 2</label>
</div>

前面的代码在每个浏览器中的表现如下：

是否有可能的解决方法，或者我们是否受浏览器的摆布，以他们认为合适的方式设置输入样式？

这个问题也在github 问题 #497 的项目问题页面上提出，但因浏览器不兼容而关闭

我已经构建了一个轮播，如果图像的宽度大于高度，我希望图像在一维宽度上最大化屏幕，反之亦然。

最大高度应该为页眉/导航栏和页脚留出空间，并且我希望它们按比例缩放。目前，它们正在缩放到宽度，但它们在垂直方向上极大地溢出了视口。

HTML：

<div id="frontimages" class="carousel slide" data-ride="carousel">

    <ul class="carousel-indicators">
        <li data-target="#frontimages", data-slide-to="0" class="active"></li>
    </ul>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block img-fluid" src="url" alt="title">
        </div>
    </div>

    <a class="carousel-control-prev" href="#frontimages" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>

    <a class="carousel-control-next" href="#frontimages" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

</div>

CSS：

.carousel-inner img {
    width: 100%;
    height: 100%;
}

我有一个 Bootstrap 4 导航栏菜单：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li …

我有一个带有响铃图标的导航。我想添加一个徽章，其中包含图标右上角的数字（就像在一些 Android 应用程序中一样）。我发现一些博客可以完成此操作，在 css 中添加数字，但我需要在服务器端添加数字，所以执行如下操作：

<span>$number</span>

会更好。

到目前为止，布局看起来像这样：

        <li class="nav-item dropdown">
            <a href="#" id="navbar-inquiries-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                <i class="fas fa-bell"></i>
                // here add badge????
            </a>
            <ul class="nav-item dropdown-menu" role="menu" aria-labelledby="navbar-inquiries-dropdown">
               <li class="nav-item">
                    <a class="dropdown-item" href="{{ route('inquiry.index') }}">
                        Requests
                    </a>
                </li>
            </ul>
        </li>

我使用标签作为复选框的蒙版，并且在选中相应的复选框时需要更改标签的背景。这是我到目前为止所做的：

.viewbutton {
  height: 48px;
  width: 48px;
  background-color: #FFFFFF;
  border-radius: 50%;
  margin: 0px 4px;
  border: 0px;
  border: 1px solid #CDCDCD;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  position: relative;
  display: inline-block;
}

#comparechk:checked+#comparebtn,
#editchk:checked+#editbtn,
#multiplechk:checked+#multiplebtn {
  background-color: #005EFF;
  outline: none;
}

<input type="checkbox" id="comparechk" class="chkhidden">
<input type="checkbox" id="editchk" class="chkhidden">
<input type="checkbox" id="multiplechk" class="chkhidden">

<label for="comparechk" id="comparebtn" class="viewbutton"></label>
<label for="editchk" id="editbtn" class="viewbutton"></label>
<label for="multiplechk" id="multiplebtn" class="viewbutton"></label>

这是我的简单引导代码..

<div class="container">
<div class="col-lg-12">

  <div class="col-lg-3">
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-lg-3">
    <p>
    bbbbb
    </p>
  </div>
  <div class="col-lg-3" ng-show="myVar">
    <p>
    cccccc
    </p>
  </div>
   <div class="col-lg-3">
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

这里我连续放置了 4 个盒子。我已经初始化了一个名为myvar.Based的变量myVar，一些框可能会隐藏。

因此，当隐藏一个盒子时，应该管理其他盒子的宽度，即宽度应该增加。不应该有多余的空间。

如果宽度是，col-lg-3则表示应将其更改为col-lg-4隐藏框时的宽度。

小提琴： https: //jsfiddle.net/euxcj3qb/14/

这个怎么做？有人可以给我一些建议吗？

我试图让 Bootstrap 行中的内容按比例缩小，而不是在移动设备上分成单列。我该怎么办呢？这是我到目前为止所拥有的一个示例：

<div class="row justify-content-center">
    <div class="col-xs-4" style="padding:0!important;"> 
        <a class="btn btn-light" style="width: 200px; height: 200px;>
            <h2> title </h2>
            <img src="" style="width:100px; height:100px;">
        </a>
    </div>
    <div class="col-xs-4" style="padding:0!important;"> 
        <a class="btn btn-light" style="width: 200px; height: 200px;>
            <h2> title </h2>
            <img src="" style="width:100px; height:100px;">
        </a>
    </div>
    <div class="col-xs-4" style="padding:0!important;"> 
        <a class="btn btn-light" style="width: 200px; height: 200px;>
            <h2> title </h2>
            <img src="" style="width:100px; height:100px;">
        </a>
    </div>
</div>

当我在手机上打开它时，每一列在页面上显示为一行。我希望所有三个在移动设备上位于同一行。

我有一个包含 50 名玩家的列表，称为玩家{1..50}，并创建了一个搜索输入，我可以在其中按名称过滤他们。

我在滚动时将搜索输入保持在适当的位置时遇到问题。

如果我将其设置为fixedor absolute，它会忽略父 div 限制，因为它应该如此，这是一个问题，因为我希望它保留在父 div 内，就像现在一样。

我怎样才能实现这一点，以便在您滚动浏览播放器时搜索栏保持在同一位置？

我已经阅读了几个问题来找到解决方案，但对于我的具体案例还没有任何运气。

完整代码可以在这里看到： https ://jsfiddle.net/nullpointer9/f748qnks/

（确保扩展窗口以便于使用）

我试图将按钮的样式设置为与链接的外观相同。这是我得到的最接近的结果：

<p>Hello <a href="aoeu">how</a> are you</p>
<p>Hello <button class="btn btn-link p-0 m-0 d-inline">how</button> are you</p>

https://codepen.io/anon/pen/ZqvjyJ

这能实现吗？

我想知道是否有人可以帮助解决在中间对齐文本（“CONSOL 概述”）而不是留在下面的标题框中时应该解决的直接问题。

我尝试过“align-content：center”和“text-align：center”，但这似乎不起作用。

任何帮助表示赞赏

我的 html 页面如下所示：

html代码中的部分是这样的：

<div class="container-fluid" style="padding-top: 15px;">
    <div class="row" 
         style="height: 50px;padding-top: 15px; background: #36304a; align-content: center; color: white; font-weight: bold; border-radius: 10px">
        <h3>CONSOL Overview</h3>
    </div>
</div>

实际上我的标题下面还有更多元素，但我想这些不需要在这里显示。