标签: twitter-bootstrap-4

这是bootstrap4:Bootstrap4复选框中的新复选框:

<label class="c-input c-checkbox">
    <input type="checkbox">
    <span class="c-indicator"></span>
    Click here
 </label>

默认情况下<input>隐藏默认复选框,仅在单击时可见.有没有办法让它始终可见.

小提琴:jsFiddle

编辑:默认情况下,这就是我想要的.

我有一排像这样的缩略图:

我希望他们的身高相等.这是我的代码:

<div class="row text-center">
    <div class="col-md-3 col-sm-6">
        <div class="thumbnail">
            <div class="caption">
                <h3>HOTKEY + COMBO</h3>
                <p>Hotkey description goes here. Category only shown in explore.</p>
                <p>
                    <a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="thumbnail">
            <div class="caption">
                <h3>HOTKEY + COMBO</h3>
                <p>short desc</p>
                <p>
                    <a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 hotkey-add">
        <div class="thumbnail">
            <div class="caption">
                <p></p>
                <p><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></a></p>
            </div>
        </div>
    </div>
</div>

这可能吗？就像我们在bootstrap4中看到的,这里是相同的高度卡:

http://www.codeply.com/render/KrUO8QpyXP#

我想一行四列。当用户使用平板电脑时，该行将有2列，其余2列将跳到该行下方。

然后，当用户使用移动设备时，该行将具有1列，其他列将在彼此之间跳转。

你能帮我吗？我已经试过了：

    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>

如何在Bootstrap 4中隐藏和替换navbar-toggler-icon？现在,下面的代码只是将'X'放在汉堡菜单下面.

<nav class="navbar navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
  data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" 
  aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">

     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
  data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" 
  aria-label="Toggle navigation">
    <span>X</span>
  </button>
</nav>

我正在尝试将我的导航栏项目对齐在bootstrap 4 alpha 6中.

除了品牌/头衔之外,我想让一切都正确.

这就是我的代码:

    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Oliver</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#projects">Projects</a>
      <a class="nav-item nav-link" href="#contact">Contact</a>
    </div>
  </div>
</nav>

我有一些bootstrap 4的问题,我想在更大的尺寸上制作3列,在xs上制作2列.

我无法做到这一点,因为总是在xs上我有一个专栏,我做错了什么？或者我不明白网格是如何工作的？

https://jsfiddle.net/pgvdhcy4/

<div class="row"> <div class="col-md-4 col-xs-6"> 11111 </div> <div class="col-md-4 col-xs-6"> 2 </div> <div class="col-md-4 col-xs-6"> 3333 </div> <div class="col-md-4 col-xs-6"> 444 </div> <div class="col-md-4 col-xs-6"> 5555 </div> <div class="col-md-4 col-xs-6"> 666 </div> </div>

当我使用称为Cards的Bootstrap 4组件时，如何稍微缩放图像。我从http://www.themezaa.com/html/leadgen/demo/seo-marketing/index.html获得了灵感。我在下面使用以下代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    

<div class="container">
    	<div class="row">
    		<div class="col-lg-3">
    			<div class="card" >
				  <img class="card-img-top" src="http://www.successmoves.co.uk/wp-content/uploads/2012/07/50708_1280x720-318x180.jpg" alt="Card image cap">
				  <div class="card-block">
				    <h4 class="card-title">Card title</h4>
				    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				</div>
    		</div>
    		<div class="col-lg-3">
    			<div class="card" >
				  <img class="card-img-top" src="http://mapleleafadventures.com/wp-content/uploads/2015/11/mv-swell-jeffreynolds-318x180.jpg" alt="Card image cap"> …

我正在使用Bootstrap v4.0 beta,我已经检查了这个迁移文档

https://v4-alpha.getbootstrap.com/migration/#responsive-utilities

但是没有办法使隐藏的X-up或隐藏-X-down工作.这是我的代码示例:

    <div class="container">
      <div class="row">
        <div class="col-md-3 hidden-md-down">
          <p class="title">Join us</p>
          <p class="subtitle">Just click on the button below</p>
          <p class="link"><a href="#" class="outstanding-link">the button below</a></p>
        </div>
      </div>
    </div>

它应该在中型设备(大于720px)中有3列可见,但隐藏在少于中型设备中.

这是一个snipet

https://jsfiddle.net/n7oo7dLk/

提前致谢.

在花了好几个小时弄清楚为什么所有列都设置为相同高度后，我得知引导程序现在自动以这种方式在v4中发布了。如何将其关闭并破坏v3的常规列？

谢谢。

<div class="container">
          <div class="row">
             <div class="col-sm-8">
              <p> Hi, I'm a small container. </p>
             </div>
             <div class="col-sm-4">
              <h1> Hi, I'm a much bigger container. </h1>
             </div>
          </div>
   </div>

在此示例中，较小的div的高度被拉伸，因此它与较大的文本的高度相同。这就是我要避免的。

我正在为老板准备一个简单的网站。我决定尝试使用引导程序，并选择了版本4。因此，我设计了一个相当不错的模板，并注意到主要内容的行超出了容器div的界限。这是页面上唯一执行此操作的行。我尝试用边距或两个元素中的任一个或两个填充来更改间距，但似乎没有任何改变。我还尝试将主要内容包含在section标记内，因为其他两行包含在header / footer标记内，并且它们仍在边界内。这也没有用。我可能在这里缺少明显的东西。谢谢您的帮助，不胜感激。

屏幕截图

我突出显示了容器只是为了显示它的边界框。在此屏幕快照中，我也从其中删除了填充，但是无论哪种方式，它都是相同的问题。

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

    <!-- fontawesome CDN embed -->
    <script src="https://use.fontawesome.com/f13a1bd68c.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>
    <div class="container">
      <!-- Header area -->
      <header class="pt-3 px-3">
        <div class="row">
          <div class="col-md-6">
            <a href="#"><img class="logo" src="img/logo1.png"></a>
          </div>

          <div class="col-md-6">
            <ul class="contact-info">
              <li class="ph-local"><i class="fa fa-phone fa-fw"></i> xxx-xxx-xxxx</li>
              <li class="ph-fax"><span class="fnt-sm">Fax: </span><i class="fa fa-fax …