Как отображать бутстрап selectpicker в центре не текст?

Я использую bootstrap selectpicker. Мне нужно отобразить selectpicker select drop down в центре всплывающего окна, но я не хочу центрировать текст внутри выделения drop down. Я могу отобразить кнопку, но не выбрать drop down. Вы поможете мне в этом?Как отображать бутстрап selectpicker в центре не текст?

/*end menu*/ 
 
.login-section{ 
 
background-color: #fff; 
 
    border-radius: 04px; 
 
    padding: 10px 20px; 
 
    height: 290px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -150px; 
 
    margin-top: -150px; 
 
-webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); 
 
-moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); 
 
box-shadow:   1px 1px 22px 0px rgba(50, 50, 50, 0.25); 
 
} 
 

 
    select 
 
{ 
 
    margin: 0 auto; 
 
    display: block; 
 
} 
 
input[type="submit"], select{ 
 
    display: block; 
 
    padding: 07px 02px; 
 
    margin: 07px auto; 
 
    border-radius: 04px; 
 
    width: 250px; 
 

 
} 
 

 
input[type="submit"] 
 
{ 
 
    background-color: #773F9B; 
 
    border: none; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size:18px; 
 
border-radius: 04px; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script> 
 

 

 
<div class="login-section"> 
 
    \t <select class="selectpicker" data-live-search="true" name="test1" > 
 
     <option>Select</option> 
 
     <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
     </select> 
 
<select name="test2"> 
 
     <option>Select</option> 
 
     <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
     </select> 
 

 
     <select class="selectpicker" data-live-search="true" name="test3" > 
 
     <option>Select</option> 
 
     <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
     </select> 
 
     <input type="submit" name="submit" value="Submit"> 
 
</div>

источник

2016-12-30 Narendra Verma

Добавлено padding: 10px 20px; и удалены width: 295px в вашем .login-section;

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

/*end menu*/ 
 
.login-section{ 
 
    padding: 10px 20px; 
 
background-color: #fff; 
 
    border-radius: 04px; 
 
    height: 290px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -150px; 
 
    margin-top: -150px; 
 
-webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); 
 
-moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); 
 
box-shadow:   1px 1px 22px 0px rgba(50, 50, 50, 0.25); 
 
} 
 

 
select 
 
{ 
 
    margin: 0 auto; 
 
    display: block; 
 
} 
 
input[type="submit"], select{ 
 
    display: block; 
 
    padding: 07px 02px; 
 
    margin: 7px auto; 
 
    border-radius: 04px; 
 
    width: 250px; 
 

 
} 
 

 
input[type="submit"] 
 
{ 
 
    background-color: #773F9B; 
 
    border: none; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size:18px; 
 
border-radius: 04px; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="login-section"> 
 
    \t <select class="selectpicker" data-live-search="true" name="test1" > 
 
     <option>Select</option> 
 
     <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
     </select> 
 
<select name="test2"> 
 
     <option>Select</option> 
 
     <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
     </select> 
 

 
     <select class="selectpicker" data-live-search="true" name="test3" > 
 
     <option>Select</option> 
 
     <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
     </select> 
 
     <input type="submit" name="submit" value="Submit"> 
 
</div>

источник

2016-12-30 15:14:23

Спасибо за ответ Mr.Jyothi, Работаю для меня, но если я добавляю выпадающее изображение, показывающее разные –

В чем разница, с которой вы сталкиваетесь? –

проигрывание с правой стороны –

-1

Try:

select 
{ 
    margin: 10px auto; 
}

источник

2016-12-30 15:10:50 Roy

Спасибо за Ответ Mr.Roy, я попробовал это также но все тот же вопрос –

@PeterHall Ответ только на код может быть не очень хорошим, но он по-прежнему остается ответом. Я бы порекомендовал вам эту запись о LQPRQ: [Вы делаете это неправильно: призыв к здравомыслию в очереди с низким качеством сообщений] (http://meta.stackoverflow.com/questions/287563/youre-doing-it- неправильная-a-plea-for-sanity-in-the-low-quality-posts-queue) – FelixSFD

@FelixSFD Этот ответ только исправит проблему для пользователя, который разместил вопрос и накладывается на другие ответы. Хороший ответ объяснил бы, почему это работает, чтобы другие пользователи могли его найти и извлечь выгоду. Тем не менее, я прочитал сообщение, с которым вы связались, и я согласен с вами. Я проблема UX с очередью просмотра, потому что никто не хочет нажимать «Looks OK», когда они не считают сообщение в порядке. –

Поместите выбирает внутри <div> и центрировать его с помощью CSS: - фиксированный размер - левый и правый края авто

/*end menu*/ 
 
.login-section{ 
 
background-color: #fff; 
 
    border-radius: 04px; 
 
    width: 295px; 
 
    height: 290px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -150px; 
 
    margin-top: -150px; 
 
-webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); 
 
-moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25); 
 
box-shadow:   1px 1px 22px 0px rgba(50, 50, 50, 0.25); 
 
} 
 

 
select 
 
{ 
 
    margin: 10px; 
 
} 
 
input[type="submit"], select{ 
 
    display: block; 
 
    padding: 07px 02px; 
 
    margin: 07px auto; 
 
    border-radius: 04px; 
 
    width: 250px; 
 

 
} 
 

 
input[type="submit"] 
 
{ 
 
    background-color: #773F9B; 
 
    border: none; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size:18px; 
 
border-radius: 04px; 
 
} 
 
#select-cont { 
 
    width:250px; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="login-section"> 
 
    \t <div id="select-cont"> 
 
     <select class="selectpicker" data-live-search="true" name="test1" > 
 
     <option>Select</option> 
 
     <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
     </select> 
 
<select name="test2"> 
 
     <option>Select</option> 
 
     <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
     </select> 
 

 
     <select class="selectpicker" data-live-search="true" name="test3" > 
 
     <option>Select</option> 
 
     <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
    <option>abc</option> 
 
     </select> 
 
     <input type="submit" name="submit" value="Submit"> 
 
    </div> 
 
</div>

источник

2016-12-30 15:17:55 MarioZ

Как отображать бутстрап selectpicker в центре не текст?

ответ

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