Question

我有一个表单，并且在尝试设置它时遇到问题。

现在看来是这样的：

我需要它看起来像这样：

我需要为Title和第2行第3列设置第一行和第一列的样式以确定出生日期。

我无法定位正确的选择器/元素。这是html的样子：

<h6 class="title">Personal Information</h6>
<div class="row">
    <div class="col-3">
        <select name="title"></select>
    </div>
</div>
<div class="clear"></div>
<div class="row">
    <div class="col-3">
        <input type="text" name="firstname" value="" id="firstname" 
            maxlength="50" size="50" class="" placeholder="First name*" 
            style="background-image:    url(&quot;data:image/png;base64,
            iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0I
            Ars4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2
            BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fz
            Pfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTr
            uqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNc
            sFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4
            NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjY
            hUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5
            NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7
            GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWI
            lfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN
            3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJ
            T1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoe
            c5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=&quot;); 
            background-repeat: no-repeat; background-attachment: 
            scroll; background-size: 16px 18px; 
            background-position: 98% 50%; cursor: auto;">                           
            <!--<input type="text" placeholder="First name*">-->
            <div class="form_error"></div>
        </div>
        <div class="col-3">
            <!-- <input type="text" placeholder="Last name*">-->
            <input type="text" name="lastname" value="" id="lastname" 
                maxlength="50" size="50" placeholder="Last name*">
            <div class="form_error"></div>
        </div>
        <div class="col-3">
            <!-- <input type="text" placeholder="Last name*">-->
            <input type="text" name="dob" value="" id="dob" maxlength="50" 
                size="50" placeholder="Date of birth (DD/MM/YYYY)*">
            <div class="form_error"></div>
            <!--<input type="text" placeholder="Date of birth (DD/MM/YYYY)*" class="dob">-->

        </div>
    </div>
    <div class="clear"></div>
    <div class="row">
        <div class="col-3">
            <input type="text" name="mobile" value="" id="mobile" 
                maxlength="50" size="50" placeholder="Mobile*">
            <div class="form_error"></div>
            <!--<input type="tel" placeholder="Mobile*">-->
        </div>
        <div class="col-3">
            <input type="email" name="email" value="" id="email" 
                maxlength="50" size="50" placeholder="Email*">
            <div class="form_error"></div>
            <!--<input type="email" placeholder="Email*">-->
        </div>
        <div class="col-3">
            <input type="text" name="emailconf" value="" id="emailconf" 
                maxlength="50" size="50" placeholder="Confirm Email*">
            <div class="form_error"></div>
            <!--<input type="email" placeholder="Confirm Email*">-->
        </div>
    </div>
    <div class="clear"></div>
    <div class="row">
        <div class="col-1">
            <input type="text" name="address1" value="" id="address1" 
                maxlength="50" size="50" placeholder="Address*">
            <div class="form_error"></div>
            <!--<input type="text" placeholder="Address*">-->
        </div>
    </div>
    <div class="clear"></div>
    <div class="row">
        <div class="col-3">
            <input type="text" name="suburb" value="" id="suburb" 
                maxlength="50" size="50" placeholder="Suburb*">
            <div class="form_error"></div>
            <!--<input type="text" placeholder="Suburb*">-->
        </div>
    <div class="col-3">
        <select name="stateid">
        </select>                        
    </div>
    <div class="col-3">
        <input type="text" name="postcode" value="" id="postcode" 
            maxlength="4" size="10" placeholder="Postcode*">
        <div class="form_error"></div>
    </div>
</div>

非常感谢任何帮助

Answer 1

使结构更好我会说加载bootstrap CSS

reset()

并使用此标记：

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

您可以自定义表单字段的外观，只需在加载Bootstrap

后输入此代码即可

<div class="container">

    <div class="row">
        <div class="col-md-12">
            <h2 class="title">Personal Information</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2">
            <select>
                <option value="mr">Mr.</option>
                <option value="mrs">Mrs.</option>
                <option value="ms">Ms.</option>
            </select>
        </div>
        <div class="col-md-4">
            <input type="text" placeholder="First name">
        </div>
        <div class="col-md-4">
            <input type="text" placeholder="Last name">
        </div>
        <div class="col-md-2">
            <input type="date">
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <input type="text" placeholder="Mobile">
        </div>
        <div class="col-md-4">
            <input type="email" placeholder="Email">
        </div>
        <div class="col-md-4">
            <input type="email" placeholder="Confirm Email">
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <input type="text" placeholder="Address">
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <input type="text" placeholder="Suburb">
        </div>
        <div class="col-md-4">
            <select>
                <option value="mr">NSW</option>
            </select>
        </div>
        <div class="col-md-4">
            <input type="text" placeholder="Post Code">
        </div>
    </div>

</div>

Answer 2

你应该使用这样的东西。并且bootstrap是响应式的，因此您可以在展开视图中看到它的外观。

{{1}}

具有选择名称的目标行和列

2 个答案: