Question

我无法在较小的设备上堆叠Bootstrap 4选项卡。我希望他们在移动设备上连续两个堆叠小型平板电脑和一个堆叠。我试图用li-md-4将li放在div中，但这似乎不起作用。这是我的代码：

<div class="container">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-justified" role="tablist">
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel5" role="tab"><img src="selskapslokaler-ikon.png" style="width: 100%"> </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel6" role="tab"> <img src="gymsaler-ikon.png" style="width: 100%"></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel7" role="tab"> <img src="bibliotek-ikon.png" style="width: 100%"> </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"> <img src="badetilbud-ikon.png" style="width: 100%"> </a>
        </li>
    </ul>
    <!-- Tab panels -->
    <div class="tab-content">
        <!--Panel 1-->
        <div class="tab-pane fade in show  minus-margin" id="panel5" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil1" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil1" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <input type="number" class="form-control size-input" id="exampleInputSize1" placeholder="Fra kvm">
    <br>
                <input type="email" class="form-control date-input" id="exampleInputFra1"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra1" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <input type="number" class="form-control size-input" id="exampleInputSize2" placeholder="Til kvm">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>

            </div>
        </div>
        <!--/.Panel 1-->
        <!--Panel 2-->
        <div class="tab-pane fade minus-margin" id="panel6" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil2" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <br>
                <input type="email" class="form-control date-input" id="exampleInputFra2"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>

            </div>
        </div>
        <!--/.Panel 2-->
        <!--Panel 3-->
        <div class="tab-pane fade minus-margin" id="panel7" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil2" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <br>
                <input type="email" class="form-control date-input" id="exampleInputFra2"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>

            </div>
        </div>
        <!--/.Panel 3-->
        <div class="tab-pane fade minus-margin" id="panel8" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil2" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <br>
                <input type="email" class="form-control date-input" id="exampleInputFra2"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>
            </div>
        </div>
    </div>
    </div>

我还尝试将标签更改为药片而没有任何成功。如果没有任何简单有效的解决方案，还有其他方法可以在我的网站上完成这种布局吗？

Answer 1

问题是form-control班级width:100%;在col-sm-6中存在冲突，因此我将其他名称命名为formcontrol1并删除width:100%并设置row作为父类

#panel5{
margin-right:0px !important;
margin-left:0px !important;
}
.form-control1 {
	display: block;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

<html>
<head>
  	<title>Bootstrap</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="setest_style.css">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>  
<div class="container">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-justified" role="tablist">
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel5" role="tab"><img src="selskapslokaler-ikon.png" style="width: 100%"> </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel6" role="tab"> <img src="gymsaler-ikon.png" style="width: 100%"></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel7" role="tab"> <img src="bibliotek-ikon.png" style="width: 100%"> </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"> <img src="badetilbud-ikon.png" style="width: 100%"> </a>
        </li>
    </ul>
    <!-- Tab panels -->
    <div class="tab-content">
        <!--Panel 1-->
        <div class="row tab-pane fade in show  minus-margin" id="panel5" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="col-xs-12 col-sm-6 col-md-6 form-control1 date-input" id="exampleInputTil1" placeholder="Fra">
                <input type="time" class="col-xs-12 col-sm-6 col-md-6 form-control1 time-input" id="exampleInputTimeTil1" placeholder="Kl.">
                <input type="number" class="col-xs-12 col-sm-6 col-md-6 form-control1 price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <input type="number" class="col-xs-12 col-sm-6 col-md-6 form-control1 size-input" id="exampleInputSize1" placeholder="Fra kvm">
    <br>
                <input type="email" class="col-xs-12 col-sm-6 col-md-6 form-control1 date-input" id="exampleInputFra1"  placeholder="Til">
                <input type="time" class="col-xs-12 col-sm-6 col-md-6 form-control1 time-input" id="exampleInputTimeFra1" placeholder="Kl.">
                <input type="number" class="col-xs-12 col-sm-6 col-md-6 form-control1 price-input" id="exampleInputPrice2" placeholder="Til kr">
                <input type="number" class="col-xs-12 col-sm-6 col-md-6 form-control1 size-input" id="exampleInputSize2" placeholder="Til kvm">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>

            </div>
        </div>
        <!--/.Panel 1-->
        <!--Panel 2-->
        <div class="tab-pane fade minus-margin" id="panel6" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil2" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <br>
                <input type="email" class="form-control date-input" id="exampleInputFra2"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>

            </div>
        </div>
        <!--/.Panel 2-->
        <!--Panel 3-->
        <div class="tab-pane fade minus-margin" id="panel7" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil2" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <br>
                <input type="email" class="form-control date-input" id="exampleInputFra2"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>

            </div>
        </div>
        <!--/.Panel 3-->
        <div class="tab-pane fade minus-margin" id="panel8" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil2" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <br>
                <input type="email" class="form-control date-input" id="exampleInputFra2"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>
            </div>
        </div>
    </div>
    </div>
</body>
</html>

Answer 2

您可以像这样使用网格列......

https://www.codeply.com/go/odlyuWOQL7

 <!-- Nav tabs -->
 <ul class="nav nav-tabs nav-justified row" role="tablist">
        <div class="col-sm-6 col-md">
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel5" role="tab"><img src="//placehold.it/140x40" style="width: 100%"> </a>
            </li>
        </div>
        <div class="col-sm-6 col-md">
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel6" role="tab"> <img src="//placehold.it/140x40" style="width: 100%"></a>
            </li>
        </div>
        <div class="col-sm-6 col-md">
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel7" role="tab"> <img src="//placehold.it/140x40" style="width: 100%"> </a>
            </li>
        </div>
        <div class="col-sm-6 col-md">
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"> <img src="//placehold.it/140x40" style="width: 100%"> </a>
            </li>
        </div>
  </ul>

在较小的设备上堆栈Bootstrap 4选项卡

2 个答案: