自动调整divs的宽度显示/隐藏的一个div在bootstrap html [英] Auto adjust width of divs on show/hide of one div in bootstrap html
问题描述
我试图使一个响应页面有三个div（每个div是一个列），其中一个列有时隐藏。当显示三个div时，宽度应为100％。
- 当一个div被隐藏时，
我试过做它喜欢这个，但是宽度是固定的，因为我给了col-lg所以。它不是自动调整：
<！DOCTYPE html>< html lang =en>< head> < link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js>< / script> < script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script>< / head>< body> < div class =row col-lg-12> < div class =col-lg-4> < h3>栏1< / h3> < / div> < div class =col-lg-4> < h3>栏2< / h3> < / div> < div class =col-lg-4hidden> < h3>栏3< / h3> < / div> < / div>< / div>< / body>< / html>
然后我试着给出如下风格：
#whole {width：100％;}。myfix {display ：表; width：100％; } .myfix> .myfix1 {display：table-cell; border：1px solid black;}
<！DOCTYPE html> ;< head> < link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js>< / script> < script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script>< / head>< body>< div class =container> < div class =row col-lg-12 myfixid =whole> < div class =myfix1> < h3>栏1< / h3> < / div> < div class =myfix1> < h3>栏2< / h3> < / div> < div class =myfix1hidden> < h3>栏3< / h3> < / div>< / div>< / body>< / html>
但是隐藏不起作用...
我的代码中有没有错误？
请帮助...
解决方案使用jquery也受欢迎..
提前感谢...
使用bootstrap，当窗口处于特殊大小时，你可以隐藏一个div。
你有4个大小：extra small（xs）我的示例显示如何在页面为medium或xs时隐藏一个div，这意味着列2（x）
因此，您可以这样写：
.border {border：1px solid green; }
<！DOCTYPE html>< html lang = en>< head> < link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js>< / script> < script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script>< / head>< body> < div class =row col-lg-12> < div class =col-lg-4 col-xs-6 border> < h3>栏1< / h3> < / div> < div class =col-lg-4 hidden-md hidden-sm hidden-xs border> < h3>栏2< / h3> < / div> < div class =col-lg-4 col-xs-6 border> < h3>栏3< / h3> < / div> < / div>< / div>< / body>< / html>
I am trying make a responsive page with three div(each div is a column), where one column is sometimes hidden.What I aim to implement is:
1.When three divs are shown, width should be 100%.
- When one div is hidden, the others needs to adjust the width and fit the external div(that is, 2 divs total width 100%) automatically.
I tried do it like this, but the width is fixed as I have given col-lg so. It is not auto adjusting:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row col-lg-12">
<div class="col-lg-4">
<h3>Column 1</h3>
</div>
<div class="col-lg-4">
<h3>Column 2</h3>
</div>
<div class="col-lg-4" hidden>
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>
Then I tried to give style as follows:
#whole
{
width:100%;
}
.myfix
{
display:table;
width: 100%;
}
.myfix > .myfix1
{
display:table-cell;
border: 1px solid black;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row col-lg-12 myfix" id="whole">
<div class="myfix1"> <h3>Column 1</h3> </div>
<div class="myfix1"> <h3>Column 2</h3> </div>
<div class="myfix1" hidden> <h3>Column 3</h3> </div>
</div>
</body>
</html>
But hidden is not working... Is there any mistake in my code? Please help... Solutions using jquery are also welcome.. Thanks in advance...
With bootstrap you can tell to hide a div when the window is in a special size.
You have 4 size : extra small (xs), small (sm), medium (md) and large (lg)
My example show how to hide one div when the page is medium or xs, that mean the column 2 will be show only when the page is large.
So you can write :
.border{
border : 1px solid green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row col-lg-12">
<div class="col-lg-4 col-xs-6 border">
<h3>Column 1</h3>
</div>
<div class="col-lg-4 hidden-md hidden-sm hidden-xs border">
<h3>Column 2</h3>
</div>
<div class="col-lg-4 col-xs-6 border">
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>
这篇关于自动调整divs的宽度显示/隐藏的一个div在bootstrap html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
