admin管理员组文章数量:1399839
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=".3.6/css/bootstrap.min.css">
<script src=".12.2/jquery.min.js"></script>
<script src=".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>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./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./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./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./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 wele.. Thanks in advance...
Share Improve this question asked May 13, 2016 at 7:00 AngularDoubtsAngularDoubts 4994 gold badges13 silver badges30 bronze badges5 Answers
Reset to default 4You just had to use style="display:none;" instead of hidden
Below is the working demo.
#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./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./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" style="display:none;"> <h3>Column 3</h3> </div>
</div>
</body>
</html>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./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./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>here is a jQuery solution... kindly check http://www.bootply./Swb3i8Henf
HTML
<button class="btnShowHide">Show</button>
<div class="row col-lg-12">
<div class="col-lg-6">
<h3>Column 1</h3>
</div>
<div class="col-lg-6">
<h3>Column 2</h3>
</div>
<div class="col-lg-6 hidden">
<h3>Column 3</h3>
</div>
</div>
CSS
.hidden{
display:none;
}
.row div{
border:1px red solid;
}
jQuery
$(document).ready(function(){
$('.btnShowHide').on('click', function(){
$('.row div').toggleClass('col-lg-4').toggleClass('col-lg-6');
$('.row div:last-child').toggleClass('hidden');
});
});
Use Bootstrap's hidden class to hide any element. Further you can use different media specific utilities like hidden-xs, hidden-sm as per your need.
#whole {
width:100%;
}
.myfix {
table-layout: fixed;
display:table;
width: 100%;
}
.myfix > .myfix1 {
display:table-cell;
border: 1px solid black;
}<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./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>For Complete Responsive Utilities
The hidden html5 attribute is not remended to use it like this. That attribute represents an element which is not relevant for the current process or the element is not yet in here.
Better to read it here at MDN:
hidden
The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been pleted. Browsers won't render elements with the hidden attribute set.
The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.
Hidden elements shouldn't be linked from non-hidden elements and elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.
Although the solution is the display property.
<div class="myfix1" style="display:none;"><!-- see here -->
<h3>Column 3</h3>
</div>
Another solution is to create a css attribute class such as:
.myfix1[hidden] {
display: none;
}
#whole {
width: 100%;
}
.myfix {
display: table;
width: 100%;
}
.myfix > .myfix1 {
display: table-cell;
border: 1px solid black;
}
.myfix1[hidden] {
display: none;
}
/* <<<<<<<<<<<<< this is here **/<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./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>本文标签： javascriptAuto adjust width of divs on showhide of one div in bootstrap htmlStack Overflow
版权声明：本文标题：javascript - Auto adjust width of divs on showhide of one div in bootstrap html - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744127444a2592020.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论