Elementlarni bir qatorda qanday qilish kerak?

Men loyihada bootstrapdan foydalanaman.

Hududning kengligi 350px.

Ushbu HTML elementlari bor:

   <form class="form-inline">
        <div class="input-group input-group-sm col-xs-5" >
            <input type="text" class="form-control" placeholder="search">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"></button>
            </div>
        </div>

        <div class="input-group input-group-sm">
                
        </div>
    </form>

Bu erda plunker .

Qanday qilib men bir satrda qidirish qutisi va ochiladigan ro'yxatni yaratishim mumkin.

0
Birinchi kirish guruhi uchun float: left dan foydalanishingiz mumkin
qo'shib qo'ydi muallif Patrick Mlr, manba

6 javoblar

.input-group are table displayed, so:

.input-group {
  display: inline-table;
}

muammoingizni hal qiladi.

JSFiddle

1
qo'shib qo'ydi
Bu barcha elementlarni ".input-group" klassi bilan o'zgartiradi, bu CSS-ning yana nima uchun ilova qilishini bilishning hech qanday usuli yo'q. Bu ishni bajarish uchun faqat HTML elementlarini (bootstrap col) ishlatish yaxshiroq bo'lar edi. Qo'shimcha CSS-ni ishlatmaydigan javobimga e'tibor qarating
qo'shib qo'ydi muallif Rick van Lieshout, manba

Faqat div-da uslubni qo'llang:

 display:inline-table;

http://jsfiddle.net/ankitg1602/mqnrmLjb/1/

1
qo'shib qo'ydi
qidirish tugmasi qidiruv kodini buzadi, chunki qidirish tugmasi display: table-cell sifatida o'rnatiladi.
qo'shib qo'ydi muallif Itay Ganor, manba

Buni tuzatish uchun CSS kerak emas, siz bootstrap jihozlari bilan buni amalga oshirishingiz mumkin.

Shakli 12 ta keng konteynerga (lol-lg-12) o'rash va har bir uskuna 6-kenglikdagi idishga (kol-lg-6) o'rash. (Oddiylik uchun men misolda faqat ish stoli o'lchamini ishlatganman)

Bu quyidagicha ko'rinadi:

<div class="col-lg-12">
   <!-- start form -->
   <div class="col-lg-6">
      <!-- input -->
   </div>
   <div class="col-lg-6">
      <!-- input -->
   </div>
   <!-- end form -->
</div>

Shunday qilib, bootstrap ekranni yarmini kesadi (12/2 = 6) va kirish qutisini o'sha joyga qo'ying.

To make it work with your code have a look at this fiddle

Note I added col-lg, col-md, col-sm and col-xs to make them appear on the same line regardless of screen size.

EDIT: To put all of this in another panel use:

<div class="panel panel-default">
  <div class="panel-body">
     <!--    form row -->
  </div>
</div>

Working fiddle: http://jsfiddle.net/92z54z04/596/

1
qo'shib qo'ydi
Xabaringiz uchun tashakkur. Har qanday fikrni qanday qilib ramkada elementlarni o'rashim mumkin?
qo'shib qo'ydi muallif Michael, manba
Ha, men fiddlega qarardim.Masalan, panelda ba'zi bir ramka ichida elementlarni qo'yishmoqchi bo'laman. Buning uchun batter.but uning dosent ishi nima uchun ishlamayapti?
qo'shib qo'ydi muallif Michael, manba
Kechirasiz, lekin sizning savolingizni tushunmayman :) Ular qaysi ramka ichiga o'ralgan? Fiddlega ko'z tashladingizmi? unda mening misolimdan ko'ra ko'proq kod bor.
qo'shib qo'ydi muallif Rick van Lieshout, manba
tahrirlashga qarang
qo'shib qo'ydi muallif Rick van Lieshout, manba

Kirish guruhingizdagi tanlangan elementga ruxsat berish uchun bootstrap kengaytirishi mumkin. Bu intuitiv bo'lsa, u sizning biznesingizga bog'liq, lekin menimcha, bu baholash uchun yaxshi ko'rinadigan variant bo'lishi mumkin. Siz asosiy elementni kirish guruhiga moslashtirish uchun ba'zi bootstraps uslubini nusxalashingiz va joylashtirishingiz mumkin. Agar sassada tekshiruvlar mavjud bo'lsa, unda kamroq fayllar mavjud bo'lsa, men buni o'zingizdan ko'ra tozalaydigan darajada bajarishingiz mumkin.

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

.input-group-select:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.input-group-select {
  position: relative;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell;
}

.input-group-select>select {
  border-color: #ccc;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 0;
  border-left-width: 0;
}

.input-group-btn:not(:first-child):not(:last-child)>.btn {
  border-radius: 0;
  border-left-width: 0;
}

.input-group-select:last-child>select {
  border-radius: 0 3px 3px 0;
}

.input-group-sm>.input-group-select>select {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-inline">
  <div class="input-group input-group-sm col-xs-5">
    <input type="text" class="form-control" placeholder="search">
    <div class="input-group-select">
      
    </div>
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"></button>
    </div>
  </div>
  <div class="input-group input-group-sm col-xs-5">
    <input type="text" class="form-control" placeholder="search">
    <div class="input-group-select">
      
    </div>
  </div>
  <div class="input-group input-group-sm col-xs-5">
    <input type="text" class="form-control" placeholder="search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"></button>
    </div>
    <div class="input-group-select">
      
    </div>
  </div>
</form>
</div> </div>
0
qo'shib qo'ydi
<form class="form-inline">
    <div class="form-group" >
    <input type="text" placeholder="search"/>

            <button class="btn btn-default" type="submit"></button>

    </div>

    

</form>
0
qo'shib qo'ydi
Ushbu kod savolga javob berishi mumkin, ammo bu kod nima uchun va/yoki qanday javob berishiga oid qo'shimcha kontekstni taqdim etadi, uning uzoq muddatli qiymatini oshiradi.
qo'shib qo'ydi muallif Donald Duck, manba

Siz uni colxs-6 xususiyatidan foydalanib bootstrap yordamida osongina qilishingiz mumkin

ish kodi:

    <form class="form-inline">
    <div class="col-xs-6">
            <div class="input-group input-group-sm" >
            <input type="text" class="form-control" placeholder="search">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"></button>
            </div>
        </div>
    </div>

<div class="col-xs-6">

        <div class="input-group input-group-sm">
                
        </div>
</div>

    </form>
0
qo'shib qo'ydi
Angular Uzbekistan
Angular Uzbekistan
107 ishtirokchilar

Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

ngTashkent
ngTashkent
77 ishtirokchilar

Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks