Question

在添加带有输入的表单组时，输入字段不会达到表单组的100％宽度，而表单组已经是卡的宽度。

我尝试将宽度样式直接添加到父元素和输入元素本身。

//for order columns add who made this
add_filter( 'manage_edit-shop_order_columns', 'firefog_post_type_columns', 20 );

function firefog_heirch_columns( $column, $post_id ) {
    switch ( $column ) {
    case 'modified':
        $m_orig     = get_post_field( 'post_modified', $post_id, 'raw' );
        $m_stamp    = strtotime( $m_orig );
        $modified   = date('d/m/y @ g:i a', $m_stamp );
            $modr_id      = get_post_meta( $post_id, '_edit_last', true );
            $auth_id      = get_post_field( 'post_author', $post_id, 'raw' );
            $user_id      = !empty( $modr_id ) ? $modr_id : $auth_id;
            $user_info    = get_userdata( $user_id );

            $user_nicename=$user_info->user_nicename;


            echo '<p class="mod-date">';
            echo '<em>on'.$modified.'</em><br />';
            echo 'by <strong>'.$user_info->display_name.'<strong> ('.$user_id.')';
            echo '</p>';
        break;
    // end all case breaks
    }
}

function firefog_post_type_columns( $columns ) {
    $columns['modified']    = 'Last Modified';
    $columns['author']      = 'Created By';
    return $columns;
}

您可以在this fiddle窗口中看到我的意思，输入内容不会覆盖卡的100％宽度。

Answer 1

您必须添加引导CDN / URL。选中此jsfiddle

 <div class="container-fluid d-flex justify-content-center">
   <div class="card d-flex justify-content-center" style="background-color:dodgerblue; height:60vh; width:40vw; border-radius:20px">
     <div class="card-body ml-4 mt-3 text-center">

       <div class="row ml-4" >
         <div class="form-group mr-5" style="display: inline-block; width: 100%; vertical-align: middle;">
           <label for="cardNumber">Card number</label>
           <div class="input-group">
             <input type="text" name="cardNumber" placeholder="Your card number" class="form-control" required>
           </div>
         </div>
       </div>
     </div>
   </div>
</div>

Answer 2

弄清楚了，这是我最想念的东西。

默认情况下，我删除了site.css文件中输入的“最大宽度”。

感谢您的回复！

表格<输入>不跨越表格宽度的100％

2 个答案: