2016-08-01 2 views
0

Я новичок в бутстрапе. Я подготовил один экран, который отлично работает во всех браузерах, кроме Safari.bootstrap textbox height issue in safari

В сафари из-за высоты текстового поля все разрывы конструкции. См. Изображение.

It should be in one row

Вот мой код:

<div id="drugSection" class="panel panel-default"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="col-md-4 col-sm-4"> 
         <div class="form-group"> 
          @Html.Label("Doses") 
          @Html.DropDownList("Doses", new SelectList(listItems), new { @class = "form-control" }) 
         </div> 
        </div> 
        <div class="col-md-4 col-sm-4"> 
         <div class="form-group"> 
          @Html.Label("Type") 
          @Html.DropDownList("Type", new SelectList(listItems), new { @class = "form-control" }) 
         </div> 
        </div> 
        <div class="col-md-4 col-sm-4"> 
         <div class="form-group"> 
          @Html.Label("Route") 
          @Html.DropDownList("Route", new SelectList(listItems), new { @class = "form-control" }) 
         </div> 
        </div> 
        <div class="col-md-4 col-sm-4"> 
         <div class="form-group"> 
          @Html.Label("Frequency") 
          @Html.DropDownList("Frequency", new SelectList(listItems), new { @class = "form-control" }) 
         </div> 
        </div> 
        <div class="col-md-4 col-sm-4 "> 
         <div class="form-group"> 
          @Html.Label("Days") 
          @Html.TextBox("Days", "", new { @class = "form-control custom-height", @placeholder = "Days" }) 
         </div> 
        </div> 
        <div class="col-md-4 col-sm-4"> 
         <div class="form-group"> 
          @Html.Label("Package Details") 
          @Html.DropDownList("Package Details", new SelectList(listItems), new { @class = "form-control" }) 
         </div> 
        </div> 

        <div class="col-md-4 col-sm-4 "> 
         <div class="form-group"> 
          @Html.Label("Quantity") 
          @Html.TextBox("Quantity", "0", new { @class = "form-control custom-height", @placeholder = "Quantity" }) 
         </div> 
        </div> 
        <div class="col-md-4 col-sm-4"> 
         <div class="form-group"> 
          @Html.Label("Unit") 
          @Html.DropDownList("Unit", new SelectList(listItems), new { @class = "form-control" }) 
         </div> 
        </div> 
        <div class="col-md-4 col-sm-4"> 
         <div class="form-group"> 
          @Html.Label("Refill") 
          @Html.DropDownList("Refill", new SelectList(listItems), new { @class = "form-control" }) 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="row nomargin"> 
        <div class="col-md-8 noPl"> 
         <div class="col-md-4 col-sm-4 "> 
          <div class="form-group"> 
           @*<div class="col-md-offset-2 col-md-10">*@ 
           <div class="checkbox-inline"> 
            @Html.CheckBox("PRN") 
            @Html.Label("PRN") 
           </div> 
           @* </div> *@ 
          </div> 
         </div> 
         <div class="col-md-4 col-sm-4 mbot10-xs"> 
          <div class="form-group"> 
           <div class="checkbox-inline"> 
            @Html.CheckBox("DAW/DNS") 
            @Html.Label("DAW/DNS") 
           </div> 
          </div> 
         </div> 
        </div> 

        <div class="col-lg-12 col-md-8 noPl"> 
         @Html.TextBox("rx lbl", "", new { @class = "form-control", @style = "max-width:100%;margin-bottom:13px;", @placeholder = "Additional Sig (will appear on rx label)" }) 

        </div> 
       </div> 

      </div> 

Как я могу это исправить в сафари. Любая помощь приветствуется.

+0

Можете ли вы поделиться своим кодом? –

+0

Я добавил код. – Ankita

+0

Поделитесь css также, или создайте JSfiddle для предварительного просмотра. дополнительно проверьте это, если у вас есть doctype на вашей странице: http://stackoverflow.com/questions/7196398/text-input-rendering-issue-with-twitter-bootstrap –

ответ

0

Каждое текстовое поле и selectbox дают равную высоту. .

input [type="text"], select{ 
     height:50px; 
    } 

Это всего лишь пример. Вы можете изменить высоту так, как хотите.