我用Bootstrap创建了一个页面。我将标签内容的框分成2x。现在，当我这样做时，标签框周围的边框不会随之扩展。当我删除内容的分割时它会这样做。
这是我的代码:)。第168行是我分裂的地方。谢谢！
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 21%;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
margin-left: -25px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
.container-fluid {
padding:0px auto;
padding-left:0px;
margin:0px auto;
}
.col-xs-4{
width:21%;
}
.col-xs-8{
width:79%;
}
.input-group{
margin-bottom:10px;
}
.col-xs-6margin.col-xs-6{
margin-top:50px;
}
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
.btn {
margin-bottom:10px;
}
.tabs.col-xs-8{
float:right;
margin-left:20px;
}
/* Tabs panel */
.tabbable-panel {
border:1px solid #eee;
padding: 10px;
margin-left:10px;
}
/* Default mode */
.tabbable-line > .nav-tabs {
border: none;
margin: 0px;
}
.tabbable-line > .nav-tabs > li {
margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
border: 0;
margin-right: 0;
color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
border: 0;
background: none !important;
color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
border-bottom: 4px solid #f3565d;
position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
border: 0;
color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
color: #404040;
}
.tabbable-line > .tab-content {
margin-top: -3px;
background-color: #fff;
border: 0;
border-top: 1px solid #eee;
padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
padding-bottom: 0;
}
/* Below tabs mode */
.tabbable-line.tabs-below > .nav-tabs > li {
border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
border-bottom: 0;
border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
margin-bottom: -2px;
border-bottom: 0;
border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
margin-top: -10px;
border-top: 0;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Navigation Menu - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<link href="style.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid"><!--Full page container start-->
<div class="row"><!--First row start navmenu and main content-->
<!--Start of Left panel Navigation bar-->
<div class="col-xs-4"><!--Left navpanel start-->
<div class="nav-side-menu"><!--Left panel content start-->
<div class="brand">Nova Computers
</div><!--End brand div-->
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li><a href="#"><i class="fa fa-dashboard fa-lg"></i> Dashboard</a></li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<a href="#"><i class="fa fa-gift fa-lg"></i> Customers <span class="arrow"></span></a></li>
<ul class="sub-menu collapse" id="products">
<li class="active"><a href="#">CSS3 Animation</a></li>
<li><a href="#">Add Customer</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Tabs & Accordions</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">FontAwesome</a></li>
<li><a href="#">Slider</a></li>
<li><a href="#">Panels</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Bootstrap Model</a></li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a></li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a></li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#"><i class="fa fa-user fa-lg"></i> Profile</a>
</li>
<li>
<a href="#"><i class="fa fa-users fa-lg"></i> Customers</a>
</li>
</ul>
</div><!--End menulist div-->
</div><!--End nav-side-menu div-->
</div><!--Left navpanel End -->
<!--End of Left panel Navigation bar-->
<!--Start of Main content box-->
<div class="col-xs-8"><!--begin content box right-->
<div class="row"><!--begin first row content box-->
<div class="col-xs-6 col-xs-6margin"><!--Start 50% of content box left-->
<div class="input-group input-group-sm">
<span class="input-group-addon">Business Name</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Salutation</span>
<input type="text" class="form-control">
<span class="input-group-addon">Firstname</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Middle</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Lastname</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Zipcode</span>
<input type="text" class="form-control">
<span class="input-group-addon">Housenumber</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Street</span>
<input type="text" class="form-control">
</div>
</div><!--End 50% of content box left-->
<div class="col-xs-6 col-xs-6margin"><!--Start 50% of content box right-->
<div class="input-group input-group-sm">
<span class="input-group-addon">Place</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Country</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 1</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 2</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 3</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 4</span>
<input type="text" class="form-control">
</div>
</div><!--End 50% of content box right-->
</div><!--End of first row-->
<div class="row"><!--Begin second row main content-->
<div class="col-xs-12 tabs"><!--Full width container tabs start -->
<div class="tabbable-panel"><!--tabbable-panel start-->
<div class="tabbable-line"><!--tabbale-line start-->
<ul class="nav nav-tabs ">
<li class="active"><a href="#tab_default_1" data-toggle="tab">Extra info</a></li>
<li><a href="#tab_default_2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab_default_3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_default_1"><!--panel tab 1 start -->
<div class="col-xs-6"><!--colum split start-->
<div class="input-group input-group-sm">
<span class="input-group-addon">Place</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Country</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 1</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 2</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 3</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 4</span>
<input type="text" class="form-control">
</div>
</div><!--colum split stop-->
<div class="col-xs-6"><!--colum split start--> <!--here's my problem-->
<div class="input-group input-group-sm">
<span class="input-group-addon">Place</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Country</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 1</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 2</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 3</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 4</span>
<input type="text" class="form-control">
</div>
</div><!--colum split stop-->
</div><!--panel tab 1 stop-->
<div class="tab-pane" id="tab_default_2"><!--panel tab 2 start-->
<p>testteststest</p><!--this works perfectly-->
<p>testteststest</p>
<p>testteststest</p>
<p>testteststest</p>
</div><!--panel tab 2 stop-->
<div class="tab-pane" id="tab_default_3"><!--panel tab 3 start-->
</div><!--panel tab 3 stop-->
</div><!--tab content stop-->
</div><!--tabbale-line stop-->
</div><!--tabbable-panel stop-->
<div class="col-md-12" style="margin-top:5px; margin-left:0px;"><!--Start buttons-->
<button type="button" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Save</button>
<button type="button" class="btn btn-labeled btn-danger">
<span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Cancel</button>
</div><!--End buttons-->
</div><!--end Full witdh container row 2-->
</div><!--End second row main content-->
</div><!--End content box right-->
<!--End of Main content box-->
</div><!--end main row-->
</div><!--Full page container end -->
</body>
</html>
答案 0 :(得分：0)
将col-xs-6包裹在这样的一行中。并检查网格的引导文档
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 21%;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
margin-left: -25px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
.container-fluid {
padding:0px auto;
padding-left:0px;
margin:0px auto;
}
.col-xs-4{
width:21%;
}
.col-xs-8{
width:79%;
}
.input-group{
margin-bottom:10px;
}
.col-xs-6margin.col-xs-6{
margin-top:50px;
}
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
.btn {
margin-bottom:10px;
}
.tabs.col-xs-8{
float:right;
margin-left:20px;
}
/* Tabs panel */
.tabbable-panel {
border:1px solid #eee;
padding: 10px;
margin-left:10px;
}
/* Default mode */
.tabbable-line > .nav-tabs {
border: none;
margin: 0px;
}
.tabbable-line > .nav-tabs > li {
margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
border: 0;
margin-right: 0;
color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
border: 0;
background: none !important;
color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
border-bottom: 4px solid #f3565d;
position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
border: 0;
color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
color: #404040;
}
.tabbable-line > .tab-content {
margin-top: -3px;
background-color: #fff;
border: 0;
border-top: 1px solid #eee;
padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
padding-bottom: 0;
}
/* Below tabs mode */
.tabbable-line.tabs-below > .nav-tabs > li {
border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
border-bottom: 0;
border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
margin-bottom: -2px;
border-bottom: 0;
border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
margin-top: -10px;
border-top: 0;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Navigation Menu - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<link href="style.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid"><!--Full page container start-->
<div class="row"><!--First row start navmenu and main content-->
<!--Start of Left panel Navigation bar-->
<div class="col-xs-4"><!--Left navpanel start-->
<div class="nav-side-menu"><!--Left panel content start-->
<div class="brand">Nova Computers
</div><!--End brand div-->
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li><a href="#"><i class="fa fa-dashboard fa-lg"></i> Dashboard</a></li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<a href="#"><i class="fa fa-gift fa-lg"></i> Customers <span class="arrow"></span></a></li>
<ul class="sub-menu collapse" id="products">
<li class="active"><a href="#">CSS3 Animation</a></li>
<li><a href="#">Add Customer</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Tabs & Accordions</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">FontAwesome</a></li>
<li><a href="#">Slider</a></li>
<li><a href="#">Panels</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Bootstrap Model</a></li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a></li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a></li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#"><i class="fa fa-user fa-lg"></i> Profile</a>
</li>
<li>
<a href="#"><i class="fa fa-users fa-lg"></i> Customers</a>
</li>
</ul>
</div><!--End menulist div-->
</div><!--End nav-side-menu div-->
</div><!--Left navpanel End -->
<!--End of Left panel Navigation bar-->
<!--Start of Main content box-->
<div class="col-xs-8"><!--begin content box right-->
<div class="row"><!--begin first row content box-->
<div class="col-xs-6 col-xs-6margin"><!--Start 50% of content box left-->
<div class="input-group input-group-sm">
<span class="input-group-addon">Business Name</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Salutation</span>
<input type="text" class="form-control">
<span class="input-group-addon">Firstname</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Middle</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Lastname</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Zipcode</span>
<input type="text" class="form-control">
<span class="input-group-addon">Housenumber</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Street</span>
<input type="text" class="form-control">
</div>
</div><!--End 50% of content box left-->
<div class="col-xs-6 col-xs-6margin"><!--Start 50% of content box right-->
<div class="input-group input-group-sm">
<span class="input-group-addon">Place</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Country</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 1</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 2</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 3</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 4</span>
<input type="text" class="form-control">
</div>
</div><!--End 50% of content box right-->
</div><!--End of first row-->
<div class="row"><!--Begin second row main content-->
<div class="col-xs-12 tabs"><!--Full width container tabs start -->
<div class="tabbable-panel"><!--tabbable-panel start-->
<div class="tabbable-line"><!--tabbale-line start-->
<ul class="nav nav-tabs ">
<li class="active"><a href="#tab_default_1" data-toggle="tab">Extra info</a></li>
<li><a href="#tab_default_2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab_default_3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_default_1"><!--panel tab 1 start --><div class="row">
<div class="col-xs-6"><!--colum split start-->
<div class="input-group input-group-sm">
<span class="input-group-addon">Place</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Country</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 1</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 2</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 3</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 4</span>
<input type="text" class="form-control">
</div>
</div><!--colum split stop-->
<div class="col-xs-6"><!--colum split start--> <!--here's my problem-->
<div class="input-group input-group-sm">
<span class="input-group-addon">Place</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Country</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 1</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 2</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 3</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Phone 4</span>
<input type="text" class="form-control">
</div>
</div>
</div><!--colum split stop-->
</div><!--panel tab 1 stop-->
<div class="tab-pane" id="tab_default_2"><!--panel tab 2 start-->
<p>testteststest</p><!--this works perfectly-->
<p>testteststest</p>
<p>testteststest</p>
<p>testteststest</p>
</div><!--panel tab 2 stop-->
<div class="tab-pane" id="tab_default_3"><!--panel tab 3 start-->
</div><!--panel tab 3 stop-->
</div><!--tab content stop-->
</div><!--tabbale-line stop-->
</div><!--tabbable-panel stop-->
<div class="col-md-12" style="margin-top:5px; margin-left:0px;"><!--Start buttons-->
<button type="button" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Save</button>
<button type="button" class="btn btn-labeled btn-danger">
<span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Cancel</button>
</div><!--End buttons-->
</div><!--end Full witdh container row 2-->
</div><!--End second row main content-->
</div><!--End content box right-->
<!--End of Main content box-->
</div><!--end main row-->
</div><!--Full page container end -->
</body>
</html>