Как использовать сетку bootstrap Система Я хочу, чтобы форма и изображение помещались на весь экран, но изображение не попадало в под-секцию div, чтобы соответствовать моему поиску на панели навигации это мой html:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="img/512.png" width="45" alt="" class="d-inline-block align-middle mr-2" style="float: left">
<!-- Logo Text -->
<span class="navbar-brand" style="color: #ffffff ;margin-left:0px;font-size: 30px;font-family: Assaf Font">Sudan Store</span>
<button data-toggle="collapse" class="navbar-toggle collapsed" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button></div>
<div
class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Store</a></li>
<li role="presentation"><a href="contact.html">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" size="35px">
</div>
<button class="btn btn-danger " type="button" data-toggle="modal" data-target="#x"><strong>Login</strong></button>
</form>
</ul>
</div>
</div>
</nav>
<div class="container"style="margin-top: 80px">
<div class="tab-content" style="margin-left: 3%">
<div style="width: 100% ;height: 535px" class="thumbnail shadows ">
<div class="containerx col-sm-6" style="width: 45%;height: 100%" id="inner">
<form >
<label >Full Name</label>
<input type="text" class="inputtext" name="firstname" placeholder="Your full name..">
<label >Email Address</label>
<input type="email" class="inputtext" name="lastname" placeholder="Your email address..">
<label >Subject</label>
<textarea class="inputtext" name="subject" placeholder="Write Anythings.." style="height:200px;resize: none"></textarea>
<button class="inputsubmit" id="send">Send</button>
</form>
<div id="logo">
<img src="img/Sudan-512.png">
<h3>kjhkhkhhk</h3>
<p>jggkihkkjjljljljljlljlljlj</p>
</div>
</div>
<div id="thanks">
<img src="img/thanks.png">
</div>
</div>
</div>
</div>
</body>
и это мой CSS:
#myBtn {
width:60px;
height:60px;
border-radius:50%;
background: rgb(191, 9, 0);
color:white;
font-size: 35px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position:fixed;
bottom:25px;
right:25px;
cursor: pointer;
outline: none;
}
#imgz {
width: 35px;
}
.button-badge {
background-color: #1779ba;
text-decoration: none;
padding: 2px 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px -10px rgba(0, 0, 0, 0.19);
position: relative;
display: inline-block;
border-radius: 50px;
position: absolute;
top: 30px;
right: -10px;
font-size: 14px;
}
.shadows{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
p{
padding: 10px;
}
.btnAdd{
margin-left: 45%;
margin-top: -6%;
}
#home div{
display: inline-block;
margin-left: 10px;
}
#menu1 div{
display: inline-block;
margin-left: 10px;
}
#menu2 div{
display: inline-block;
margin-left: 10px;
}
.nav-tabs > li.active > a {
font-weight: bold;
font-size: 16px;
}
.nav-tabs > li > a {
color: black;
}
.inputtext {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical
}
.inputsubmit {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.inputsubmit:hover {
background-color: #45a049;
}
.containerx {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
#thanks{
display: none;
}
#thanks img{
width: 25%;
margin-left: 20%;
margin-top: 10%;
}
#logo{
width: 20%;
margin-left: 740px;
margin-top: -450px;
}
#logo img{
width: 110px;
}
................. .................................................. .................................................. .................................................. ..................................