Правильный путь к сетке в bootstrap - PullRequest
Новая
       2

Правильный путь к сетке в bootstrap

0 голосов
/ 15 января 2020

Как мне использовать сетку bootstrap Система, которую я хочу, чтобы форма и изображение помещались на весь экран, но изображение не попадало в рамки. Это мое html: 

<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>

И это мое CSS: 

.shadows{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.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;
}

.containerx {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

#logo{
    width: 20%;
    margin-left: 740px;
    margin-top: -450px;
}

#logo img{
    width: 110px;
}

..................................... .................................................. .................................................. .................................................. .................................................. ...........................................

...