1. 首页
  2. 问答
  3. 如何在中心而不是文本显示引导selectpicker？

如何在中心而不是文本显示引导selectpicker？

2016-12-30 33 views
0

我正在使用bootstrap selectpicker.I必须在弹出窗口中心显示selectpicker select下拉菜单，但我不想将选择下拉菜单中的文本居中。我能够显示按钮但不能选择下拉菜单。你能帮我吗？如何在中心而不是文本显示引导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

回答

1

新增padding: 10px 20px;并在.login-section删除width: 295px;

试试这个。

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

+0

感谢您的回复Mr.Jyothi，为我工作，但如果我添加下拉菜单显示不同 –

+0

您所面对的区别是什么？ –

+0

从右侧丢失填充 –

-1

尝试：

select 
{ 
    margin: 10px auto; 
}

来源

2016-12-30 15:10:50 Roy

+0

感谢回复罗伊先生，我也试过但仍然相同的问题 –

+1

@PeterHall一个代码唯一的答案可能不是一个好的，但它仍然是一个答案。我会推荐你​​这篇关于LQPRQ的文章：[你做错了：在低质量岗位队列中请求理智]（http://meta.stackoverflow.com/questions/287563/youre-doing-it-在低质量的帖子队列中错误地为理智辩护） – FelixSFD

+0

@FelixSFD这个答案只会解决发布问题的用户的问题，并与其他答案重叠。一个好的答案可以解释_why_这是否有效，以便其他用户可以找到它并从中受益。不过，我已阅读你关联的帖子，并且我同意你的观点。我是审查队列中的用户体验问题，因为没有人想在帖子没有问题时点击“看起来不错”。 –

0

把选择<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

相关问题

 相关问题