Как заполнить всю строку Bootstrap содержимым

Я пытаюсь понять, как получить всю ширину строки начальной загрузки, которая будет заполнена 3 дочерними span4s. Похоже, что все остальное пространство осталось после финального пролета4. В прошлый раз, когда я проверил 3 x 4, было 12, так что мне не хватает?Как заполнить всю строку Bootstrap содержимым

<body> 
    <div class="container"> 
     <div class="row" style="background-color:#eee; border: 1px solid #888;"> 
      <input name="srcCity" type="text" class="span4" placeholder="City"> 
      <select name="srcState" class="span4" data-country="US" data-state="CA"> </select> 
      <input name="srcZip" type="text" class="span4" placeholder="Zip"> 
     </div> 
    </div> 
</body>

https://jsfiddle.net/ujq2vxqc/

источник

2015-09-25 user1250991

Я не понимаю, вы имеете в виду вы смотрите вперед, чтобы устранить небольшой разрыв на левой и правой стороне? –

Возможно, вы видите что-то другое. Шахта выглядит так: http://imgur.com/cCY3tbh Я хочу, чтобы содержимое заполняло строку, и там не было места с правой стороны, как будто в настоящее время. – user1250991

Я думаю, что вы используете неправильный класс, вместо того, чтобы использовать span4 (не существует в bootstrap.css файле AFAIK), вы можете использовать col-xx-4 с xx может быть xs, sm, md, lg до вас ,
Некоторые вещи, как:

<body> 
    <div class="container"> 
     <div class="row" style="background-color:#eee; border: 1px solid #888;"> 
      <input name="srcCity" type="text" class="col-sm-4" placeholder="City"> 
      <select name="srcState" class="col-sm-4" data-country="US" data-state="CA"> </select> 
      <input name="srcZip" type="text" class="col-sm-4" placeholder="Zip"> 
     </div> 
    </div> 
</body>

источник

2015-09-25 03:34:44

Я просто попробовал col-sm-4 и col-lg-4 для всех 3 элементов, а пространство справа увеличивается в обоих случаях. Файл bootstrap css, который я использую, определяет span4 как: .span4 {width: 300px;} – user1250991

После проверки снова я вижу, что вы используете Bootstrap.css v2.1.1 (который отличается от класса другим, даже не существующим в Bootstrap .css 3.3.5, который я использую), поэтому мое решение не может исправить ваши проблемы, найдя другое решение, но все же предлагаю вам использовать Bootstrap v3, если вы не должны использовать v2 –

Я просто обновил свою скрипку своим ответом. измените ширину экрана, чтобы показать, что он занимает пространство вверх. https://jsfiddle.net/ujq2vxqc/22/ –

Как генри сказал, что вы должны использовать class="col-sm-4". По умолчанию контейнер имеет отступы 15px, вам нужно переопределить это в вашей таблице стилей. й ширины вашего экрана зависит от .col-xs-X .col-sm-X .col-md-X .col-lg-X thew более широкий экран просмотра большего столбца, который вы хотите использовать.

Также размер @media важен в бутстрапе. поэтому давайте скажем, что у вас есть вид 768px, контейнер в бутстрапе установлен на 750 пикселей. показано ниже.

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 
@media (min-width: 768px) { 
    .container { 
    width: 750px; 
    } 
} 
@media (min-width: 992px) { 
    .container { 
    width: 970px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
    width: 1170px; 
    } 
} 
.container-fluid { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
}

Оригинал

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
}

Сделать это Somthing так:

.container { обивка-направо: 2px; padding-left: 2px; margin-right: auto; margin-left: auto; }

.container { 
 
    padding-right: 2px; 
 
    padding-left: 2px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
.col-xs-1, 
 
.col-sm-1, 
 
.col-md-1, 
 
.col-lg-1, 
 
.col-xs-2, 
 
.col-sm-2, 
 
.col-md-2, 
 
.col-lg-2, 
 
.col-xs-3, 
 
.col-sm-3, 
 
.col-md-3, 
 
.col-lg-3, 
 
.col-xs-4, 
 
.col-sm-4, 
 
.col-md-4, 
 
.col-lg-4, 
 
.col-xs-5, 
 
.col-sm-5, 
 
.col-md-5, 
 
.col-lg-5, 
 
.col-xs-6, 
 
.col-sm-6, 
 
.col-md-6, 
 
.col-lg-6, 
 
.col-xs-7, 
 
.col-sm-7, 
 
.col-md-7, 
 
.col-lg-7, 
 
.col-xs-8, 
 
.col-sm-8, 
 
.col-md-8, 
 
.col-lg-8, 
 
.col-xs-9, 
 
.col-sm-9, 
 
.col-md-9, 
 
.col-lg-9, 
 
.col-xs-10, 
 
.col-sm-10, 
 
.col-md-10, 
 
.col-lg-10, 
 
.col-xs-11, 
 
.col-sm-11, 
 
.col-md-11, 
 
.col-lg-11, 
 
.col-xs-12, 
 
.col-sm-12, 
 
.col-md-12, 
 
.col-lg-12 { 
 
    position: relative; 
 
    min-height: 1px; 
 
    padding-right: 2px; 
 
    padding-left: 2px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row" style="background-color:#eee; border: 1px solid #888;"> 
 

 
    <div class="col-xs-4"> 
 
     <input name="srcCity" type="text" class="form-control col-lg-4" placeholder="City"> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <select name="srcState" data-country="US" class="form-control col-lg-4" data-state="CA"></select> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <input name="srcZip" type="text" class="form-control col-lg-4" placeholder="Zip"> 
 

 
    </div> 
 
    </div>

Fiddle

источник

2015-09-25 03:54:48

Как заполнить всю строку Bootstrap содержимым

ответ

Смежные вопросы