製作文字並選擇水平下拉

我正在嘗試製作像標籤一樣的文字，並在同一行中選擇下拉菜單。當我使用display: inline這兩個div它的作品。但是，當我使用form-control類在選擇它打破。這裏是例子製作文字並選擇水平下拉

下面是代碼

<div class="col-md-2"> 
    <div> <span>test</span></div> 

    <div> 
    <select class="form-control" id="sel1"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
    </select> 
    </div> 
</div>

我想讓它在同一直線上。

來源

2017-08-05 jonm

你想讓文本和'select'居中嗎？你也希望'select'在容器的右邊對齊嗎？ –

當您使用Bootstrap時，請始終以Bootstrap的方式思考：我的意思是使用其網格佈局哲學。

因此，您可以將這2 <div> s封裝在.row之內，然後根據所需的可用斷點使用預定義的列。此步驟應解決您的問題：

<div class="row"> 
    <div class="col-your_break_point_unit"> 
     <!-- your text here --> 
    </div> 
    <div class="col-your_break_point_unit"> 
     <select> 
      <!-- your select options here --> 
     </select> 
    </div> 
</div>

來源

2017-08-05 08:07:58

添加display: flex爲容器。

.flex { 
 
    /* become a flex container */ 
 
    /* its children will be flex-items */ 
 
    display: flex; 
 
    /* align items on font's baseline */ 
 
    align-items: baseline; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="col-md-2 flex"> 
 
    <div><span>test</span></div> 
 

 
    <div> 
 
    <select class="form-control" id="sel1"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
    </select> 
 
    </div> 
 
</div>

來源

2017-08-05 08:08:18

您可以使用flex在容器上，以使這decendants成爲柔性項，align-items: center居中他們，並在標籤上有一個margin-right把它和之間一個很好的間距select元素。

.input-container { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.input-label { 
 
    margin-right: 10px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-md-2 input-container"> 
 
    <label class="input-label">test</label> 
 
    <select class="form-control"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    </select> 
 
</div>

來源

2017-08-05 08:20:49 Guy

<div class="form-horizontal"> 
<label>Country</label> 
<select> 
<option>Nepal</option> 
<option>India</option> 
<option>China</option> 
</select>

注：表格水平一流的引導將保持雙方在同一行。

來源

2017-11-24 03:33:00 Karma

製作文字並選擇水平下拉

回答

相關問題