Question

我正在努力让我创建的下拉列表位于768px下的同一行。现在，我正在使用form-inline，但这只适用于768px而不是{。}}。

能告诉我这是怎么做到的吗？尝试过列表，但是效果不好。正如你在小提琴中看到的那样，我希望在每个下拉列表中都有一些文本。我知道我没有使用标签，因为这使得

<div class="col-xs-12">
<div class="form-inline">
    <div class="form-group">
        Adult<br />
        <select class="dropdown" id="Dropdown-adult">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </div>

    <div class="form-group">
        Child (3-15)<br />
        <select class="dropdown" id="Dropdown-child">
            <option>0</option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>

    <div class="form-group">
        Infant (0-3)<br />
        <select class="dropdown" id="Dropdown-infant">
            <option>0</option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>

    <div class="form-group">
        Pet<br />
        <select class="dropdown" id="Dropdown-pet">
            <option>0</option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>
</div>

<div class="form-group">

    <div class="padding-top15">
        <button type="submit" class="bookingbutton">BOOK NOW</button>
    </div>
</div>
</div>

希望有人能告诉我应该注意什么。

更新

我认为你们误解了我想说的话。现在，当查看页面超过768px 时，下拉列表应该是内联的。如果网页低于768px，则所有下拉列表都不在内联中，这是不应该的。我只想使用2行而不是5-8

我只是希望它与768px相同。我已经上传了768px下它应该是什么样子的图像。

Answer 1

这是因为Bootstrap添加类来创建响应式网格。如果您希望列表始终位于同一行，只需在css中添加：

.form-group{
  display:inline-block
}

JS小提琴：https://jsfiddle.net/f8gfa768/1/

Answer 2

如果我理解正确，您希望在768px width：

下实现

[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->

那些br标签搞砸了你的风格。为什么不删除它们，并将display: block/inline-block个样式添加到select元素，具体取决于窗口宽度，它将替换br：< / p>

select{
    display: inline-block;
}

@media (min-width: 768px){
    select{
        display: block;
    }
}

＆＃13;

#Dropdown-adult {
     height: 30px;
     font-size: 15px;
     width: 45px;
}

#Dropdown-child {
     height: 30px;
     font-size: 15px;
     width: 80px;
}

#Dropdown-infant {
     height: 30px;
     font-size: 15px;
     width: 80px;
}

#Dropdown-pet {
     height: 30px;
     font-size: 15px;
     width: 45px;
}

#Dropdown-vehicles {
     max-width: 100%; 
     height: 30px;
     width: 100%;
     font-size: 15px;
}

.bookingbutton {
    background-color: #F6861F;
    border-style: none;
    height: 30px;
    width: 110px;
    color: white;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif; 
}

.padding-top15 {
    padding-top: 15px;
}

select{
    display: inline-block;
}

@media (min-width: 768px){
    select{
        display: block;
    }
}

＆＃13;

<div class="col-xs-12">
    <div class="form-inline">
        <div class="form-group">
            Adult
            <select class="dropdown" id="Dropdown-adult">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>

        <div class="form-group">
            Child (3-15)
            <select class="dropdown" id="Dropdown-child">
                <option>0</option>
                <option>1</option>
                <option>2</option>
            </select>
        </div>

        <div class="form-group">
            Infant (0-3)
            <select class="dropdown" id="Dropdown-infant">
                <option>0</option>
                <option>1</option>
                <option>2</option>
            </select>
        </div>

        <div class="form-group">
            Pet
            <select class="dropdown" id="Dropdown-pet">
                <option>0</option>
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        
        <div class="padding-top15">
            <button type="submit" class="bookingbutton">BOOK NOW</button>
        </div>
    </div>
</div>

＆＃13;

JSFiddle

如何使Dropsdownlist +文本内联到768px以下？

2 个答案: