Пытается создать два шаблона бутстрапа coloumn

Question

Я пытаюсь создать простой шаблон с двумя coloumns. Вот что я получил до сих пор

Я использую самозагрузки. Теперь я хочу спросить. Почему моя позиция боковой панели оставляет некоторое пространство?

Левая сторона использования этого <div class="pull-left col-sm-7"></div> и моя правая <div class="col-sm-5">

Вот мой HTML код

<div class="container"> 

    <div class="row"> 
     <div class="col-sm-12"><img class="headerimg" src=""></div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <nav class="navbar navbar-default"> 
       <div class="container"> 
        <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="http://localhost:84/jdih/">Home</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 
        <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
</div> 
</div> 
<div class="col-md-7"> 
<img src="" class="img-responsive" style='float:left;width:200px;height:200px; margin-right:10px;'> 
<p class="text-justify">Text <br> 
Text 
</p> 
<p class="text-justify"> 
Text</p> 
<p class="text-justify"> 
Text 
</p> 

<p class="text-justify">Text</p> 

<p class="text-justify">Text<br> 
Text<br> 
Text</p> 

<p class="text-justify">Text</p> 

<p class="text-justify"><strong>Text</strong>.</p> 
</div> 


<div class="col-md-5 pull-right"> 
    <form class="form-horizontal"> 
     <div class="form-group"> 
      <div class="col-md-5"> 
          <label>Jenis</label> 

          <select class="form-control select2" name="parent"> 
          <option value="">Semua Jenis</option> 

          </select> 
          </div> 
         </div> 
         <div class="form-group"><div class="col-md-5"> 

          <label>Kategori</label> 
                 <select class="form-control select2" name="parent"> 
          <option value="">Semua Jenis</option> 

          </select> 
          </div> 
         </div> 
          <div class="form-group"> 
          <div class="col-md-5"> 
          <label>Tahun</label> 

          <select class="form-control select2" name="parent"> 
          <option value="">Semua Jenis</option> 

          </select> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-md-5"> 
           <label>Cari Berdasarkan</label> 
            <select class="form-control select2" name="parent"> 
             <option value="">Semua Jenis</option> 
            </select> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-md-5"> 
           <label>Kata Kunci</label> 
            <input type="text" class="form-control"> 
          </div> 
         </div> 
          <div class="form-group"> 
          <div class="col-md-5"> 

            <input type="submit" class="btn pull-right btn-submit" value="Find"> 
          </div> 
         </div> 
    </form> 
</div> 

</div> 

А вот скрипку https://jsfiddle.net/hv4c9yhd/.

Так вы можете сказать мне, как сделать sidebar part заполнить пустое пространство? Заранее спасибо

Answer 1

пытаются использовать

<div class="container-fluid"> 

вместо

<div class="container"> 

содержание удалить из контейнера

или может удалить край контейнера и отступов с помощью CSS

Answer 2

Изменение col-md-7 и col-md-5 - col-xs-7col-xs-5. Это, безусловно, поможет. ваш экран может быть лишним.

Answer 3

Попробуйте это:

.headerimg{ 
 
\t \t \t \t width : 100%; 
 
\t \t \t }

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > 
 
<div class="container"> 
 

 
    <div class="row"> 
 
     \t <div class="col-sm-12"><img class="headerimg" src=""></div> 
 
    \t </div> 
 
    <div class="row"> 
 
     \t <div class="col-sm-12"> 
 
     \t <nav class="navbar navbar-default"> 
 
    \t \t \t \t <div class="container"> 
 
    \t \t \t \t \t <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="http://localhost:84/jdih/">Home</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      \t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 
 
      \t \t \t <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 
</div> 
 
</div> 
 
<div class="col-md-7 " style="display:inline-block;"> 
 
<img src="" class="img-responsive" style='float:left;width:200px;height:200px; margin-right:10px;'> 
 
<p class="text-justify">Text <br> 
 
Text 
 
</p> 
 
<p class="text-justify"> 
 
Text</p> 
 
<p class="text-justify"> 
 
Text 
 
</p> 
 

 
<p class="text-justify">Text</p> 
 

 
<p class="text-justify">Text<br> 
 
Text<br> 
 
Text</p> 
 

 
<p class="text-justify">Text</p> 
 

 
<p class="text-justify"><strong>Text</strong>.</p> 
 
</div> 
 

 

 
<div class="col-md-5 pull-right"> 
 
\t <form class="form-horizontal"> 
 
    \t <div class="form-group"> 
 
     \t <div class="col-md-5"> 
 
          <label>Jenis</label> 
 
          
 
          <select class="form-control select2" name="parent"> 
 
          <option value="">Semua Jenis</option> 
 
          \t 
 
\t \t \t \t \t \t \t </select> 
 
\t \t      </div> 
 
     \t   \t </div> 
 
         <div class="form-group"><div class="col-md-5"> 
 

 
          <label>Kategori</label> 
 
                 <select class="form-control select2" name="parent"> 
 
          <option value="">Semua Jenis</option> 
 
          \t 
 
\t \t \t \t \t \t \t </select> 
 
\t \t      </div> 
 
     \t   \t </div> 
 
          <div class="form-group"> 
 
          <div class="col-md-5"> 
 
          <label>Tahun</label> 
 
          
 
          <select class="form-control select2" name="parent"> 
 
          <option value="">Semua Jenis</option> 
 
          \t 
 
\t \t \t \t \t \t \t </select> 
 
\t \t      </div> 
 
     \t   \t </div> 
 
         <div class="form-group"> 
 
          \t <div class="col-md-5"> 
 
          \t \t <label>Cari Berdasarkan</label> 
 
          \t \t <select class="form-control select2" name="parent"> 
 
          \t \t \t \t <option value="">Semua Jenis</option> 
 
\t         </select> 
 
\t \t      </div> 
 
     \t   \t </div> 
 
         <div class="form-group"> 
 
          \t <div class="col-md-5"> 
 
          \t \t <label>Kata Kunci</label> 
 
          \t \t <input type="text" class="form-control"> 
 
\t \t      </div> 
 
     \t   \t </div> 
 
          <div class="form-group"> 
 
          \t <div class="col-md-5"> 
 
          \t \t 
 
          \t \t <input type="submit" class="btn pull-right btn-submit" value="Find"> 
 
\t \t      </div> 
 
     \t   \t </div> 
 
    </form> 
 
</div> 
 

 
</div>

Answer 4

добавить этот класс "строка-не-обивка" родительскому DIV вашего "Col-см-7" и «Col-см-5 «-divs, а затем этот CSS:

.row-no-padding > [class*="col-"] { 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
} 

Answer 5

вы не должны использовать container для navbar, если вы не хотите, чтобы пробела в обе стороне. Вы можете использовать container ниже этого navbar (как вы хотите это)

<html> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 

<body> 
    <div class="row"> 

    <div class="row"> 
     <div class="col-sm-12"><img class="headerimg" src=""></div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <nav class="navbar navbar-default"> 
       <div class="container"> 
        <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="http://localhost:84/jdih/">Home</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 
        <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
</div> 
</div> 
</div> 


<div class="container"> 
<div class="row"> 
     <div class="col-sm-12"> 
</div> 
</div> 
<div class="col-md-7"> 
<img src="" class="img-responsive" style='float:left;width:200px;height:200px; margin-right:10px;'> 
<p class="text-justify">Text <br> 
Text 
</p> 
<p class="text-justify"> 
Text</p> 
<p class="text-justify"> 
Text 
</p> 

<p class="text-justify">Text</p> 

<p class="text-justify">Text<br> 
Text<br> 
Text</p> 

<p class="text-justify">Text</p> 

<p class="text-justify"><strong>Text</strong>.</p> 
</div> 


<div class="col-md-5 pull-right"> 
    <form class="form-horizontal"> 
     <div class="form-group"> 
      <div class="col-md-5"> 
          <label>Jenis</label> 

          <select class="form-control select2" name="parent"> 
          <option value="">Semua Jenis</option> 

          </select> 
          </div> 
         </div> 
         <div class="form-group"><div class="col-md-5"> 

          <label>Kategori</label> 
                 <select class="form-control select2" name="parent"> 
          <option value="">Semua Jenis</option> 

          </select> 
          </div> 
         </div> 
          <div class="form-group"> 
          <div class="col-md-5"> 
          <label>Tahun</label> 

          <select class="form-control select2" name="parent"> 
          <option value="">Semua Jenis</option> 

          </select> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-md-5"> 
           <label>Cari Berdasarkan</label> 
            <select class="form-control select2" name="parent"> 
             <option value="">Semua Jenis</option> 
            </select> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-md-5"> 
           <label>Kata Kunci</label> 
            <input type="text" class="form-control"> 
          </div> 
         </div> 
          <div class="form-group"> 
          <div class="col-md-5"> 

            <input type="submit" class="btn pull-right btn-submit" value="Find"> 
          </div> 
         </div> 
    </form> 
</div> 

</div> 
</body> 

</html> 

Answer 6

Я прошел через свой код, и обнаружил, что вы над использованием дивами при определении нового класса, который может быть легко прилагаемым к предыдущему родительскому DIV, как это :

Вместо:

<div class="form-group"> 
     <div class="col-md-5"> 

Делать это делает код трудно для других, чтобы понять и плохая практика. Вы можете легко исправить это, выполнив следующие действия:

<div class ="form-group col-md-5"> 

Очень важно, чтобы вы поняли этот синтаксис, особенно при работе на вашем коде или пытаемся понять другой код людей. В основном это относится как к классу .form-group, так и к классу .col-md-5 к этому элементу div. Это красноречиво и делает ваш код намного более понятным и понятным.

Я очистил ваш код и скорректировал некоторые вещи. Дайте мне знать, если это поможет или вам нужно, чтобы я объяснил конкретный раздел, который я изменил/удалил.

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-sm-12"> 
     <img class="headerimg img-responsive" src="pic1 image"> 
     <nav class="navbar navbar-default"> 
       <div class="navbar-header"> 
      <a class="navbar-brand" href="#">Home</a> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
    </div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a></li> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </ul> 
      </div><!-- /.navbar-collapse --> 
     </nav> 
    </div>` 
</div> 

<div class="col-md-4"> 
    <img src="" class="img-responsive" alt="picture2"> 
    <p class="text-justify">Text <br>Text</p> 
    <p class="text-justify">Text</p> 
    <p class="text-justify">Text</p> 
    <p class="text-justify">Text</p> 
    <p class="text-justify">Text<br>Text<br>Text</p> 
    <p class="text-justify">Text</p> 
    <p class="text-justify"><strong>Text</strong>.</p> 
</div> 


<div class="col-md-4 col-md-offset-4 pull-right"> 
    <form class="form-horizontal"> 
     <div class="form-group col-md-5"> 
      <label>Jenis</label> 
      <select class="form-control select2" name="parent"> 
       <option value="">Semua Jenis</option> 
      </select> 
      </div> 
     <div class="form-group col-md-5"> 
      <label>Kategori</label> 
      <select class="form-control select2" name="parent"> 
       <option value="">Semua Jenis</option> 
      </select> 
     </div> 
     <div class="form-group col-md-5"> 
      <label>Tahun</label> 
      <select class="form-control select2" name="parent"> 
       <option value="">Semua Jenis</option> 
      </select> 
     </div> 
     <div class="form-group col-md-5"> 
      <label>Cari Berdasarkan</label> 
      <select class="form-control select2" name="parent"> 
       <option value="">Semua Jenis</option> 
      </select> 
     </div> 
     <div class="form-group col-md-5"> 
      <label>Kata Kunci</label> 
      <input type="text" class="form-control" place-holder="value"> 
     </div> 
     <div class="form-group col-md-5"> 
      <input type="submit" class="btn btn-default" value="Find"> 
     </div> 
    </form> 
</div>` 

Следующий код отвечает на ваш вопрос прямо, хотя:

<div class="container-fluid"> 
...</div> 
<div class="col-md-4 col-md-offset-4 pull-right"> 
...</div> 

Есть много способов сделать вашу форму реагировать, как некоторые другие ответы включают. Я просто подумал, что я хотел бы подчеркнуть важность организации и надлежащего использования div и убедиться, что у каждого тега есть соответствующий закрывающий тег.